javascriptjqueryasp.net-mvcbootstrap-modalkendo-editor

Insert hyperlink popup read only when using kendo editor in modal


When i use the kendo editor in a modal the insert hyperlink/image popups are read only. How can i fix that?

Kendo UI v2015.3.930

Html for this example:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModal-label">Modal title</h4>

            </div>
            <div class="modal-body">
                <textarea id="editor" name="Message" style="width:100%"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
<a href="#" id="test">Test</a>

Javascript

<script>
$(document).ready(function () {
    //create Editor from textarea HTML element with default set of tools
    $("#editor").kendoEditor({
        resizable: {
            content: true,
            toolbar: true
        }
    });
});


$("#test").on("click", function (e) {
    $("#myModal").modal('show');
});
</script>

Solution

  • I got response from the Telerik Team

    The Kendo UI Editor uses a popup for the "Insert hyperlink" tool. The popup is rendered as a child of the body, i.e. it is outside the Bootstrap modal dialog. As a result, the Bootstrap modal dialog does not allow anything in the popup to be focused.

    Please disable the Bootstrap dialog's modality, or use a modal Kendo UI Window instead.

    http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap#known-limitations