Syncfusion AI Assistant

How can I help you?

Getting started in TypeScript Treegrid control

28 May 20267 minutes to read

The TreeGrid component is essential for displaying hierarchical data in a tabular format. It is commonly used for project management (displaying tasks and subtasks), organizational structures (displaying company hierarchies), file systems, and any scenario where data has parent-child relationships.

This section explains the steps to create a simple TreeGrid and demonstrates the basic usage of the TreeGrid component using the Essential® JS 2 quickstart seed repository. This seed repository is pre-configured with the Essential® JS 2 package.

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. It requires node v14.15.0 or higher. For more information about webpack and its features, refer to the webpack documentation.

Set up development environment

Clone the Essential® JS 2 quickstart application project from GitHub using the following command line scripts.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack-
cd ej2-quickstart-webpack-

Add Syncfusion® TypeScript TreeGrid packages

Syncfusion® TypeScript (Essential® JS 2) packages are available in the public registry on npmjs.com. You can install all Syncfusion® TypeScript (Essential® JS 2) controls are available either as a single @syncfusion/ej2 package or as individual packages for each control.

Use the following command to install the dependent npm packages from the command prompt.

npm install

Adding CSS reference

Combined CSS files are available in the Essential® JS 2 package root folder. This can be referenced in your [src/styles/styles.css] using the following code.

@import '../../node_modules/@syncfusion/ej2/material.css';

Adding TreeGrid component

Add the TreeGrid component in [src/app/app.ts] file using the following code and define a TreeGrid container element in [src/index.html] to render the component.

import { TreeGrid } from '@syncfusion/ej2-treegrid';
const 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: 'Design', StartDate: new Date('02/10/2025'), EndDate: new Date('02/14/2025'), Duration: 5,
        subtasks: [
            { TaskID: 5, TaskName: 'Software Specification', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3, },
            { TaskID: 6, TaskName: 'Design Documentation', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2, },
            { TaskID: 7, TaskName: 'Design complete', StartDate: new Date('02/14/2025'), EndDate: new Date('02/14/2025'), Duration: 1 },
        ],
    },
];

let treeGridObj: TreeGrid = new TreeGrid({
    dataSource: data,
    childMapping: 'subtasks',
    treeColumnIndex: 1,
    columns: [
        { field: 'TaskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },
        { field: 'TaskName', headerText: 'Task Name', width: 200 },
        {
            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>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link rel="shortcut icon" href="resources/favicon.ico" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Syncfusion styling reference -->
    <link href="./styles/styles.css" rel="stylesheet" />
</head>

<body>
    <div>
        <!--HTML TreeGrid element, which is going to render as Essential JS 2 TreeGrid-->
        <div id="TreeGrid"></div>
    </div>
</body>

</html>
@import '../../node_modules/@syncfusion/ej2/material.css';

Run the application

npm start

See also