Edit this page

Integrate Editor into Dialog

Environment

Product Editor for Progress Kendo UI Dialog for Progress Kendo UI
Progress Kendo UI version Tested up to version 2017.2.621

Description

How can I display the Kendo UI Editor in a Kendo UI Dialog?

Solution

Initialize the Kendo UI Editor in the Dialog by displaying the value of the Editor in an external div element.

<div id="editorDialog">
 <textarea id="editor"></textarea>
</div>

Content:
<div id="content" style="border: 2px solid black; width: 100%; height:300px; overflow: auto;">
  <h1>Sample</h1>
</div>

<button id="openBtn" class="k-button" type="button">Update Content</button>

<script>
var editor = $("#editor").kendoEditor()
    .data("kendoEditor");

    var dialog = $("#editorDialog").kendoDialog({
        width: "500px",
        title: "Editor",
        visible: false,
        actions: [
            { text: 'OK', primary: true, action: updateText },
            { text: 'Cancel'}
        ],
        open: function(){
            editor.refresh();
        }
    }).data("kendoDialog");

    $("#openBtn").click(function(){
        dialog.open();
    });

    function updateText(){
        $("#content").html(editor.value());
    }
</script>
<style>
    .k-dialog .k-content.k-window-content.k-dialog-content,
    .k-dialog .k-content iframe.k-content{
        padding: 0;
        margin: 0;
    }
</style>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy