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-indexstyle to the Window that holds the Editor. - Using an
!importantclause with thez-indexstyle.
<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>