New to Kendo UI for jQuery? Download free 30-day trial

Use Inline Editor inside Kendo UI Windows

Environment

Product Progress® Kendo UI® Editor for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I use an inline Kendo UI for jQuery Editor inside a Kendo UI for jQuery Window?

Solution

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>
.editorToolbarWindow{
      display: flex;
}

.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