Use Inline Editor inside Kendo UI Windows

The inline Editor uses a popup toolbar, which is placed inside a Kendo UI Window instance.

When several Kendo UI Window instances are open, the most recently focused one always moves on top of all others. This might lead to the Editor toolbar being hidden behind the Window instance that holds the Editor itself.

The following example demonstrates how to handle such a scenario by:

  • Enforcing a fixed z-index style to the Window that holds the Editor.
  • Using an !important clause with the z-index style.
<style>

.zIndexEnforce
{
    /* '!important' is required to override an existing inline style. */
    /* The z-index value itself can be arbitrary. */
    z-index: 12345 !important;
}

</style>

<div id="window">
    <p>This is a Kendo UI Editor in inline mode.<br />foo<br />bar</p>
    <div id="editor" style="height:200px"></div>
</div>

<script>
// The following initialization code will be
// generated automatically when using Kendo UI helpers.
$(function() {
    $("#window").kendoWindow({
        title: "Window",
        width: 600,
        height: 350,
        visible: false
    });

    $("#editor").kendoEditor();
});
// widget initialization code end

// When using Kendo UI helpers, place or call the following code
// after the Window declaration.
$(function() {
    var w = $("#window").data("kendoWindow");
    w.wrapper.addClass("zIndexEnforce");
    w.center().open();
});

</script>

See Also

In this article
Not finding the help you need? Improve this article