How can I help you?
Module in JavaScript Treegrid control
22 May 202615 minutes to read
The available TreeGrid modules are:
| Feature | Module | Description |
|---|---|---|
Page |
Page |
This module is used for the paging feature. |
Sort |
Sort |
This module is used for the sorting feature. |
Filter |
Filter |
This module is used for the filtering feature. |
Edit |
Edit |
This module is used for the editing feature. |
Aggregate |
Aggregate |
This module is used for the aggregate feature. |
ColumnChooser |
ColumnChooser |
This module is used for the column chooser feature. |
ColumnMenu |
ColumnMenu |
This module is used for the column menu feature. |
CommandColumn |
CommandColumn |
This module is used for the command column feature. |
ContextMenu |
ContextMenu |
This module is used for the context menu feature. |
Resize |
Resize |
This module is used for the resize feature. |
Reorder |
Reorder |
This module is used for the reorder feature. |
Print |
Print |
This module is used for the print feature and this is a default injected module. |
Toolbar |
Toolbar |
This module is used for the toolbar feature. |
ExcelExport |
ExcelExport |
This module is used for the Excel export feature. |
PdfExport |
PdfExport |
This module is used for the PDF export feature. |
Enabling basic features
The following example demonstrates how to enable basic features such as Paging, Sorting, Filtering, Toolbar and Editing in the grid component.
var treeGridObj = new ej.treegrid.TreeGrid({
dataSource: data,
childMapping: 'subtasks',
treeColumnIndex: 1,
allowPaging: true,
pageSettings: {pageSize: 7},
allowFiltering: true,
filterSettings: { type: 'Checkbox' },
allowSorting: true,
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings:{ allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell' },
columns: [
{ field: 'TaskID', headerText: 'Task ID', width: 90, textAlign: 'Right', isPrimaryKey: true },
{ field: 'TaskName', headerText: 'Task Name', width: 160 },
{ field: 'StartDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd' },
{ field: 'EndDate', headerText: 'End Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd' },
{ field: 'Duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Grid Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<!-- Essential JS 2 material theme -->
<link href="https://cdn.syncfusion.com/ej2/33.2.3/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 all script -->
<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="TreeGrid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>var data = [
{
TaskID: 1, TaskName: 'Planning', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4,
subtasks: [
{ TaskID: 2, TaskName: 'Plan timeline', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
{ TaskID: 3, TaskName: 'Plan budget', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
{ TaskID: 4, TaskName: 'Allocate resources', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
{ TaskID: 5, TaskName: 'Planning complete', StartDate: new Date('02/07/2025'), EndDate: new Date('02/07/2025'), Duration: 1 },
],
},
{
TaskID: 6, TaskName: 'Design', StartDate: new Date('02/10/2025'), EndDate: new Date('02/14/2025'), Duration: 5,
subtasks: [
{ TaskID: 7, TaskName: 'Software Specification', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3 },
{ TaskID: 8, TaskName: 'Develop prototype', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3 },
{ TaskID: 9, TaskName: 'Get approval from customer', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2 },
{ TaskID: 10, TaskName: 'Design Documentation', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2 },
{ TaskID: 11, TaskName: 'Design complete', StartDate: new Date('02/14/2025'), EndDate: new Date('02/14/2025'), Duration: 1 },
],
},
{
TaskID: 12, TaskName: 'Implementation Phase', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
subtasks: [
{
TaskID: 13, TaskName: 'Phase 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{
TaskID: 14, TaskName: 'Implementation Module 1',
StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{ TaskID: 15, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 16, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 17, TaskName: 'Testing', StartDate: new Date('02/20/2025'), EndDate: new Date('02/21/2025'), Duration: 2 },
{ TaskID: 18, TaskName: 'Bug fix', StartDate: new Date('02/24/2025'), EndDate: new Date('02/25/2025'), Duration: 2 },
{ TaskID: 19, TaskName: 'Customer review meeting', StartDate: new Date('02/26/2025'), EndDate: new Date('02/27/2025'), Duration: 2 },
{ TaskID: 20, TaskName: 'Phase 1 complete', StartDate: new Date('02/27/2025'), EndDate: new Date('02/27/2025'), Duration: 1 },
],
},
],
},
{
TaskID: 21, TaskName: 'Phase 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
subtasks: [
{
TaskID: 22, TaskName: 'Implementation Module 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
subtasks: [
{ TaskID: 23, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/20/2025'), Duration: 4 },
{ TaskID: 24, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/20/2025'), Duration: 4 },
{ TaskID: 25, TaskName: 'Testing', StartDate: new Date('02/21/2025'), EndDate: new Date('02/24/2025'), Duration: 2 },
{ TaskID: 26, TaskName: 'Bug fix', StartDate: new Date('02/25/2025'), EndDate: new Date('02/26/2025'), Duration: 2 },
{ TaskID: 27, TaskName: 'Customer review meeting', StartDate: new Date('02/27/2025'), EndDate: new Date('02/28/2025'), Duration: 2 },
{ TaskID: 28, TaskName: 'Phase 2 complete', StartDate: new Date('02/28/2025'), EndDate: new Date('02/28/2025'), Duration: 1 },
],
},
],
},
{
TaskID: 29, TaskName: 'Phase 3', StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{
TaskID: 30, TaskName: 'Implementation Module 3',
StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{ TaskID: 31, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 32, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 33, TaskName: 'Testing', StartDate: new Date('02/20/2025'), EndDate: new Date('02/21/2025'), Duration: 2 },
{ TaskID: 34, TaskName: 'Bug fix', StartDate: new Date('02/24/2025'), EndDate: new Date('02/25/2025'), Duration: 2 },
{ TaskID: 35, TaskName: 'Customer review meeting', StartDate: new Date('02/26/2025'), EndDate: new Date('02/27/2025'), Duration: 2 },
{ TaskID: 36, TaskName: 'Phase 3 complete', StartDate: new Date('02/27/2025'), EndDate: new Date('02/27/2025'), Duration: 1 },
],
},
],
},
],
},
];