The Splitter widget provides an easy way to create a dynamic layout of resizable and collapsible panes. The widget converts the children of an HTML element in to the interactive layout, adding resize and collapse handles based on configuration. Splitters can be mixed in both vertical and horizontal orientations to build complex layouts.

Getting Started

<div id="splitter">
   <div>
       Area 1
   </div>
   <div>
       Area 2
   </div>
</div>

  $("#splitter").kendoSplitter();

When the Splitter is initialized, a vertical split bar will be placed between the two HTML divs. This bar can be moved by a user left and right to adjust the size on the panes.

Configuring Splitter Behavior

Splitter provides many configuration options that can be easily set during initialization. Among the properties that can be controlled:

• Min/Max pane size
• Resizable and Collapsible pane behaviors
• Orientation of the splitter

Pane properties are set for each individual pane in a Splitter, whereas Splitter properties apply to the entire widget.

  $("#splitter").kendoSplitter({
      panes: [{
          min: "100px",
          max: "300px",
          collapsible: true
      },
      {
          collapsible: true
      }],
      orientation: "vertical"
  });

Nested Splitter Layouts

To achieve complex layouts, it may be necessary to nest Splitters in different orientations. Splitter fully supports nested configurations. All that is required is proper HTML configuration and multiple Kendo Splitter initializations.

  <!-- Define nested HTML layout with divs-->
  <div id="horizontalSplitter">
      <div><p>Left Side Pane Content</p></div>
      <div>
          <div id="verticalSplitter">
              <div><p>Right Side, Top Pane Content</p></div>
              <div><p>Right Side, Bottom Pane Content</p></div>
          </div>
      </div>
  </div>

  //Initialize both Splitters with the proper orientation
  $(document).ready(function(){
      $("horizontalSplitter").kendoSplitter();
      $("verticalSplitter").kendoSplitter({orientation: "vertical"});
  });

Loading Content with Ajax

While any valid technique for loading Ajax content can be used, Splitter provides built-in support for asynchronously loading content from URLs. These URLs should return HTML fragments that can be loaded in a Splitter pane. Ajax content loading must be configured for each Pane that should use it.

  <!-- Define the Splitter HTML-->
  <div id="splitter">
      <div>Area 1 with Static Content</div>
      <div> </div>
  </div>

  //Initialize the Splitter and configure async loading for one pane
  $(document).ready(function(){
      $("#splitter").kendoSplitter({
          panes: [null,{ contentUrl: "html-content-snippet.html"}]
      });
  });