Expand the Splitter Based on Content Height
Environment
| Product | Progress® Kendo UI® Splitter for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I expand the Kendo UI Splitter based on the height of the content?
Solution
The following example demonstrates how to make the Kendo UI Splitter expand its height based on the content inside a pane.
- 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.
- Make sure that the parent content is resized when the content of the pane is rendered.
- Call the
resizemethod to finalize the process.
<style>
html,
body,
#splitter
{
height:100%;
margin:0;
padding:0;
}
</style>
<div id="splitter">
<div><div id="grid"></div></div>
<div></div>
</div>
<script>
$(function() {
$("#splitter").kendoSplitter({
panes: [ { resizable: true , scrollable: false }, {} ]
});
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
}
},
columns: [{
field: "ContactName",
title: "Contact Name",
}],
dataBound: function(e) {
var gridHeight = e.sender.wrapper.height();
$(document).find("body").height(gridHeight);
var splitter = $("#splitter").data("kendoSplitter");
splitter.resize(true);
}
});
});
</script>