Search results

Getting started

This section explains the steps required to create a simple Essential JS 2 TreeGrid and demonstrates the basic usage of the TreeGrid control in a React application.

Dependencies

Following is the list of dependencies to use the TreeGrid with all features.

|-- @syncfusion/ej2-treegrid
     |-- @syncfusion/ej2-grids
          |-- @syncfusion/ej2-base
          |-- @syncfusion/ej2-data
          |-- @syncfusion/ej2-buttons
          |-- @syncfusion/ej2-popups
          |-- @syncfusion/ej2-navigations
          |-- @syncfusion/ej2-dropdowns
          |-- @syncfusion/ej2-lists
          |-- @syncfusion/ej2-inputs
          |-- @syncfusion/ej2-splitbuttons
          |-- @syncfusion/ej2-calendars
          |-- @syncfusion/ej2-excel-export
          |-- @syncfusion/ej2-pdf-export
          |-- @syncfusion/ej2-file-utils
          |-- @syncfusion/ej2-compression

Setup for Local Development

You can use create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app
  • To setup basic React sample use following commands.
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

npm install

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry. To install TreeGrid component, use the following command

npm install @syncfusion/ej2-react-treegrid --save

Adding CSS reference

Add components style as given below in src/App.css.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import "../node_modules/@syncfusion/ej2-react-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-treegrid/styles/material.css";

To refer App.css in the application then import it in the src/App.tsx file.

Adding TreeGrid component

Now, you can start adding TreeGrid component in the application. For getting started, add the TreeGrid component in src/App.tsx file using following code.

Place the following treegrid code in the src/App.tsx.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
import './App.css';
class App extends React.Component<{}, {}>{
    render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='410'>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='70' textAlign='Right'></ColumnDirective>
              <ColumnDirective field='taskName' headerText='Task Name' width='200'></ColumnDirective>
              <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' />
              <ColumnDirective field='endDate' headerText='End Date' width='90' format='yMd' textAlign='Right' />
              <ColumnDirective field='duration' headerText='Duration' width='90' textAlign='Right' />
              <ColumnDirective field='progress' headerText='Progress' width='90' textAlign='Right' />
              <ColumnDirective field='priority' headerText='Priority' width='90' />
            </ColumnsDirective>
        </TreeGridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('treegrid'));

Module Injection

TreeGrid component features are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the App. In the current application, we are going to use paging, sorting, filtering and exporting feature of TreeGrid. Please find relevant feature service name and description as follows.

  • Page - Inject this service to use paging feature.
  • Sort - Inject this service to use sorting feature.
  • Filter - Inject this service to use filtering feature.
  • ExcelExport - Inject this service to use Excel Export feature.
  • PdfExport - Inject this service to use PDF Export feature.

These modules should be injected into the treegrid using the Inject directive.

Additional feature modules are available here.

Enable Paging

The paging feature enables users to view the TreeGrid record in a paged view. It can be enabled by setting allowPaging property to true. Inject the Page module in Inject.services as follows. If the Page service is not injected, the pager will not be rendered in the treegrid. Pager can be customized using pageSettings property.

We also have Root level paging mode in which paging is based on the root level rows only i.e., it ignores the child rows count and it can be enabled by using the pageSettings.pageSizeMode property.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page, Inject } from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
class App extends React.Component<{}, {}>{
    render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping= 'subtasks' allowPaging='true' pageSettings={{ pageSize: 7 }}>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'></ColumnDirective>
              <ColumnDirective field='taskName' headerText='Task Name' width='180'
              textAlign='Left'></ColumnDirective>
              <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
              <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            </ColumnsDirective>
            <Inject services={[Page]}/>
          </TreeGridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('treegrid'));

Enable Sorting

The sorting feature enables you to order the records. It can be enabled by setting the allowSorting property as true. Inject the Sort module in the Inject.services as follows. If the Sort module is not injected, you cannot sort when a header is clicked. Sorting feature can be customized using sortSettings property.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page, Inject, Sort } from '@syncfusion/ej2-react-treegrid';
import { sortData } from './datasource';
class App extends React.Component<{}, {}>{

    public sortingOptions: Object = { columns: [{ field: 'Category', direction: 'Ascending' }, { field: 'orderName', direction: 'Ascending' }] };

    render() {
        return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping= 'subtasks' allowPaging='true' allowSorting='true' sortSettings={this.sortingOptions}>
            <ColumnsDirective>
              <ColumnDirective field='Category' headerText='Category' width='150'></ColumnDirective>
              <ColumnDirective field='orderName' headerText='Order Name' width='170'></ColumnDirective>
              <ColumnDirective field='orderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right' type='date' />
              <ColumnDirective field='price' headerText='Price' width='100' textAlign='Right' type='number' format='C0' />
            </ColumnsDirective>
            <Inject services={[Page, Sort]}/>
        </TreeGridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('treegrid'));

Enable Filtering

The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the allowFiltering property as true. Inject the Filter module in the Inject.services as follows. If Filter module is not injected, filter bar will not be rendered in TreeGrid. Filtering feature can be customized using filterSettings property.

By default, filtered records are shown along with its parent records. This behavior can be changed by using filterSettings-hierarchyMode property.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page, Filter, Sort, Inject } from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
class App extends React.Component<{}, {}>{
    render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
            childMapping= 'subtasks' allowPaging='true' allowFiltering='true' allowSorting='true'
            pageSettings={{ pageSize: 11 }}>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'></ColumnDirective>
              <ColumnDirective field='taskName' headerText='Task Name' width='180'
              textAlign='Left'></ColumnDirective>
              <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
              <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            </ColumnsDirective>
            <Inject services={[Filter, Page, Sort]} />
          </TreeGridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('treegrid'));

Run the application

The create-react-app will pre-configure the project to compile and run the application in browser. Use the following command to run the application.

npm start

Output will be appears as follows.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page, Filter, Sort, Inject } from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource.tsx';
class App extends React.Component<{}, {}>{
    render() {
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1}
            childMapping= 'subtasks' allowPaging='true' allowFiltering='true' allowSorting='true'
            pageSettings={{ pageSize: 11 }}>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'></ColumnDirective>
              <ColumnDirective field='taskName' headerText='Task Name' width='180'
              textAlign='Left'></ColumnDirective>
              <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
              <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            </ColumnsDirective>
            <Inject services={[Filter, Page, Sort]} />
          </TreeGridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('treegrid'));