Getting started in TypeScript Tree Grid control

22 Jul 20267 minutes to read

The Tree Grid 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 Tree Grid and demonstrates the basic usage of the Tree Grid 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. For more information about webpack and its features, refer to the webpack documentation.

Prerequisites

Ensure the following tools are installed on your machine:

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 Tree Grid package

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 @syncfusion/ej2-treegrid package:

npm install @syncfusion/ej2-treegrid --save

Then, install the remaining dependent npm packages using the following command:

npm install

Adding CSS reference

Themes for Syncfusion® Tree Grid component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme --save

Then add the following CSS reference to the src/styles/styles.css file:

@import "../../node_modules/@syncfusion/ej2-material3-theme/styles/treegrid/index.css";

Adding Tree Grid component

Add the Tree Grid component in [src/app/app.ts] file using the following code and define a Tree Grid 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 Tree Grid element, which is going to render as Essential JS 2 Tree Grid-->
        <div id="TreeGrid"></div>
    </div>
</body>

</html>
@import '../../node_modules/@syncfusion/ej2-material3-theme/styles/treegrid/index.css';

Run the application

The npm start command compiles the TypeScript source files and starts the webpack development server. Run the following command:

npm start

Registering Syncfusion license

The Syncfusion® Tree Grid requires a valid license key to be registered within the application. To prevent license validation warnings, refer to the Syncfusion licensing documentation.

Troubleshooting

Tree Grid styles are not applied: Ensure that the required Syncfusion theme package is installed and the theme CSS is imported correctly in the src/styles/styles.css file.

Trial license warning message: Register your Syncfusion license key before initializing any Syncfusion® control. Refer to the Registering a license key section.

See also