Edit this page

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.
Example
<style>

.zIndexEnforce
{
    /* '!important' is required to override an existsing 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 widget initialization code below will be
// generated automatically when using Kendo UI server wrappers
$(function() {
    $("#window").kendoWindow({
        title: "Window",
        width: 600,
        height: 350,
        visible: false
    });

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

// when using Kendo UI wrappers, 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

For more runnable examples on the Kendo UI Editor, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy