Category / Section
How to create a collapsing tree grid in HTML5/Javascript?
1 min read
This Knowledge base explains how to create a collapsing Tree Grid in HTML/JavaScript.
Solution
Using enableCollapseAll property of Tree Grid, we can able to create a collapsing Tree Grid at the initial rendering and the same collapsing state will maintain while paging.
JS
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
allowPaging:true,
enableCollapseAll: true,
childMapping: 'subtasks',
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right'},
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{ field: 'startDate', headerText: 'Start Date', width: 90,textAlign: 'Right', type: 'date', format: 'yMd'},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'approved', headerText: 'Approved', width: 110 }
],
});
treeGridObj.appendTo('#TreeGrid');
Figure 1 Collapsing Tree Grid
Also refer the other frameworks demo links below,
