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

Expand to Content

The following example demonstrates how to make the Kendo UI Splitter expand its height based on the content inside a pane.

  1. Set up the Kendo UI Splitter to expand to the height of its parent according to the article on how to expand to 100% height and auto-resize.
  2. Make sure that the parent content is resized when the content of the pane is rendered.
  3. Call the resize method to finalize the process.

<div id="splitter">
  <div><div id="grid"></div></div>

    $(function() {
            panes: [ { resizable: true , scrollable: false }, {} ]

            dataSource: {
                type: "odata",
                transport: {
                read: "//"
            columns: [{
                field: "ContactName",
                title: "Contact Name",
            dataBound: function(e) {
                var gridHeight = e.sender.wrapper.height();
                var splitter = $("#splitter").data("kendoSplitter");

See Also

In this article
Not finding the help you need? Improve this article