Category / Section
How to create a collapsing tree grid in HTML5/Javascript?
1 min read
This article explains how to create a collapsing Tree Grid in HTML/JavaScript.
Solution
Using the enableCollapseAll property of the Tree Grid, we can create a collapsible Tree Grid during the initial rendering, and the same collapsed state will be maintained 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 to the other frameworks demo links below,
