Add an Auto-Resizing Splitter to the Window
Environment
| Product | Progress® Kendo UI® Window for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I add a Splitter that resizes automatically along with the Kendo UI Window component?
Solution
The example below demonstrates how to achieve the desired scenario.
<style>
html
{
font: 12px sans-serif;
}
#splitter
{
border-width: 0;
height: 100%;
}
#win
{
padding: 0;
overflow: hidden;
}
</style>
<div id="win">
<div id="splitter">
<div>left pane <br /><br />
Please resize the Window and watch the Splitter resize automatically.</div>
<div>right pane</div>
</div>
</div>
<script>
$("#win").kendoWindow({
title: "Kendo UI Window",
modal: true,
width: 400,
height: 250
}).data("kendoWindow").center();
$("#splitter").kendoSplitter({
panes: [{},{}]
});
</script>