Add Auto-Resizing Splitter

The example below demonstrates how to add a Splitter that resizes automatically along with the Kendo UI Window widget.

Example

    <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>

See Also

Other article and how-to examples on the Kendo UI Window:

• Window JavaScript API Reference
• How to Create Confirmation Dialog via Promises
• How to Post to Iframe
• How to Restrict Window Positioning

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