Category / Section
How to render TreeGrid inside tab or hidden element
1 min read
When we render the TreeGrid inside the hidden element, TreeGrid control’s height and width was not get update properly due to the existence of scroll bar. We need to refresh its height/width while making the TreeGrid container as visible.
A sample was prepared and rendered the TreeGrid inside the hidden tab.
The following code explains, how to render the TreeGrid inside Tab control.
JS
<body>
<div id="defaultTab">
<ul>
<li><a href="#Tab1">Chart</a></li>
<li><a href="#Tab2">TreeGrid</a></li>
</ul>
<div id="Tab1">
<div>
<div id="chart"></div>
</div>
</div>
<div id="Tab2">
<div>
<div id="treegrid"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#defaultTab").ejTab({
itemActive: "beforeActive"
});
$("#chart").ejChart();
var dateFormat = "{0:" + ej.preferredCulture()["calendars"]["standard"]["patterns"]["d"] + "}";
$("#treegrid").ejTreeGrid({
dataSource: sampleData,
childMapping: "subtasks",
treeColumnIndex: 1,
isResponsive: true,
columns: [
{ field: "taskID", headerText: "Task Id" },
{ field: "taskName", headerText: "Task Name" },
{ field: "startDate", headerText: "Start Date", format: dateFormat },
{ field: "endDate", headerText: "End Date", format: dateFormat },
{ field: "duration", headerText: "Duration" },
{ field: "progress", headerText: "Progress" }
]
});
});
//Method to refresh the TreeGrid size while the control changes from hidden state to visible state.
function beforeActive(args) {
if (args.activeIndex == 1) {
var treeGridObj = $("#treegrid").data("ejTreeGrid"),
sizeSettings = {
width: "100%"
};
if (treeGridObj)
treeGridObj.option("sizeSettings", sizeSettings);
}
}
</script>
</body>
A sample to render TreeGrid inside tab control was available in the following link,
