Expand Grids to Match the Height of TabStrip Containers within Splitter Panes
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Operating System | Windows 10 64bit |
Preferred Language | JavaScript |
Description
Your project might require you to expand the height of the Grid to match the height of its TabStrip container within a Splitter pane.
Solution
To achieve this behavior:
- Make sure that the layout of the Splitter corresponds to the requirements of your project. If the Splitter has to expand to 100% in height, resize it.
- Expand the height of the TabStrip containers by using the approach in the how-to example, which relies on the
window.resize
event. In this case, however, theresize
event has to be of the closest Splitter instance. - Assuming that its
<div>
is 100% high and automatically expands vertically, call theresize()
method of the Grid. For more information on how to set the Grid to 100% height and auto-resize it, refer to this this article.
The
resize
method of the Splitter measures the height of the Grid's<div>
element. It does not adjust the height of the scrollable data area because after the Splitter fires itsresize
event, you have to adjust the layout of the TabStrip. Only after that can you call theresize
method of the Grid.
The following example demonstrates how to expand a Grid that is located in a TabStrip container within a Splitter pane.
<style>
html,
body,
#splitter,
#grid,
#tabstrip-parent,
#tabstrip {
margin: 0;
padding: 0;
border-width: 0;
height: 100%; /* DO NOT USE !important for setting the Grid height! */
}
html
{
font: 14px sans-serif;
overflow: hidden;
}
</style>
<div id="splitter">
<div id="left-pane">left pane</div>
<div id="right-pane">
<div id="tabstrip">
<ul>
<li class="k-active">Item 1</li>
<li>Item 2</li>
</ul>
<div style="padding:0;overflow:hidden">
<div id="grid"></div>
</div>
<div>
Content 2
</div>
</div>
</div>
</div>
<script>
function expandContentDivs(divs) {
var visibleDiv = divs.filter(":visible");
var verticalSpace = tabStripElement.innerHeight()
- tabStripElement.children(".k-tabstrip-items").outerHeight()
- parseFloat(visibleDiv.css("padding-top"))
- parseFloat(visibleDiv.css("padding-bottom"))
- parseFloat(visibleDiv.css("border-top-width"))
- parseFloat(visibleDiv.css("border-bottom-width"))
- parseFloat(visibleDiv.css("margin-bottom"));
divs.height(Math.floor(verticalSpace));
// all of the above padding/margin/border calculations can be replaced by a single hard-coded number for improved performance
}
function resizeTabsAndGrid() {
if (tabStripElement) {
expandContentDivs(tabStripElement.children(".k-content"));
}
var grid = $("#grid").data("kendoGrid");
if (grid && grid.wrapper.is(":visible")) {
grid.resize();
}
}
$("#splitter").kendoSplitter({
//resize: resizeTabAndGrid, // the nested widgets are not initialized yet, will attach the handler later
panes: [
{ size: 100 },
{ scrollable: false }
]
});
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipName: { type: "string" },
ShipCity: { type: "string" }
}
}
},
pageSize: 25,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
filterable: true,
sortable: true,
resizable: true,
pageable: true,
columns: [{
field:"OrderID",
filterable: false,
width: 200
},
"ShipName",
"ShipCity"
]
});
var tabStripElement = $("#tabstrip").kendoTabStrip({
activate: resizeTabsAndGrid,
animation: {
open: {
effects: "fade"
}
}
});
tabStripElement.parent().attr("id", "tabstrip-parent");
var tabStrip = tabStripElement.data("kendoTabStrip");
var splitter = $("#splitter").data("kendoSplitter");
splitter.bind("resize", resizeTabsAndGrid);
resizeTabAndGrid();
</script>