Module in TypeScript Treegrid control

21 May 202615 minutes to read

Syncfusion TypeScript TreeGrid modules help optimize your application’s bundle size by including only the features you need. To enable a specific TreeGrid feature, import and inject the corresponding Feature Module into your TreeGrid configuration.

The available TreeGrid modules are:

Feature Module Description
Page Page Inject this module to use paging feature.
Sort Sort Inject this module to use sorting feature.
Filter Filter Inject this module to use filtering feature.
Edit Edit Inject this module to use editing feature.
Aggregate Aggregate Inject this module to use aggregate feature.
ColumnChooser ColumnChooser Inject this module to use column chooser feature.
ColumnMenu ColumnMenu Inject this module to use column menu feature.
CommandColumn CommandColumn Inject this module to use command column feature.
ContextMenu ContextMenu Inject this module to use context menu feature.
Resize Resize Inject this module to use resize feature.
Reorder Reorder Inject this module to use reorder feature.
Print Print Inject this module to use print feature and this is a default injected module.
Toolbar Toolbar Inject this module to use toolbar feature.
ExcelExport ExcelExport Inject this module to use Excel export feature.
PdfExport PdfExport Inject this module to use PDF export feature.

Enabling basic features

The following example demonstrates how to enable basic features such as Paging, Sorting, Filtering, Toolbar and Editing by importing required modules from @syncfusion/ej2-treegrid and injecting them into the grid component.

import { TreeGrid, Page, Filter, Sort, Toolbar, Edit } from '@syncfusion/ej2-treegrid';
import { data } from './datasource.ts';

TreeGrid.Inject(Page, Filter, Sort, Toolbar, Edit);

let treeGridObj: TreeGrid = new 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/34.1.29/material.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='TreeGrid'></div>        
    </div>
</body>
</html>
export let data: object[] = [
    {
        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 },
                        ],
                    },
                ],
            },
        ],
    },
];