Search results

Row in React TreeGrid component

22 Nov 2022 / 2 minutes to read

The row represents record details fetched from data source.

To get start quickly with features in Row, you can check on this video:

Customize rows

You can customize the appearance of a row by using the rowDataBound event. The rowDataBound event triggers for every row. In the event handler, you can get the RowDataBoundEventArgs that contains details of the row.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { getObject } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
    const rowDataBound = (args) => {
        if (getObject('duration', args.data) === 0) {
            args.row.style.background = '#336c12';
        }
        else if (getObject('duration', args.data) < 3) {
            args.row.style.background = '#7b2b1d';
        }
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' rowDataBound={rowDataBound} enableHover={false}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;
Copied to clipboard
import { getObject, RowDataBoundEventArgs } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

function App() {
    const rowDataBound = (args: RowDataBoundEventArgs) => {
        if (getObject('duration', args.data) === 0 ) {
            (args.row as HTMLTableRowElement).style.background= '#336c12';
        } else if (getObject('duration', args.data) < 3) {
            (args.row as HTMLTableRowElement).style.background= '#7b2b1d';
        }
    }

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
        height='275' rowDataBound={rowDataBound} enableHover={false}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

Styling alternate row

You can change the treegrid’s alternative rows’ background color by overriding the .e-altrow class.

Copied to clipboard
.e-treegrid .e-altrow {
    background-color: #fafafa;
}

Please refer the following example.

Source
Preview
App.jsx
custom.css
App.tsx
Copied to clipboard
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' enableHover={false}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;
Copied to clipboard
.e-treegrid .e-altrow {
  background-color: #fafafa;
}
Copied to clipboard
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

function App() {
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' enableHover={false}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

Refer to our React Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our React Tree Grid example to know how to present and manipulate data.