The HTML tags can be displayed in the TreeGrid header and content by enabling the disableHtmlEncode
property.
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { htmlData } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return <TreeGridComponent dataSource={htmlData} treeColumnIndex={1} childMapping='subtasks' height='300'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='<span> Task ID </span>' width='160' textAlign='Right' disableHtmlEncode={true}/>
<ColumnDirective field='taskName' headerText='<span> Task Name </span>' width='180' disableHtmlEncode={false}/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
<ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { htmlData } from './datasource';
export default class App extends React.Component {
render() {
return <TreeGridComponent dataSource={htmlData} treeColumnIndex={1} childMapping='subtasks' height='300'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='<span> Task ID </span>' width='160' textAlign='Right' disableHtmlEncode={true}/>
<ColumnDirective field='taskName' headerText='<span> Task Name </span>' width='180' disableHtmlEncode={false}/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The appearance of cells can be customized by using the queryCellInfo
event.
The queryCellInfo
event triggers for every cell. In that event handler, you can get QueryCellInfoEventArgs
that contains the details of the cell.
import { QueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { Column, ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public customizeCell(args: QueryCellInfoEventArgs) {
const cell : HTMLTableCellElement = args.cell as HTMLTableCellElement;
if ((args.column as Column).field === 'progress' && +cell.innerHTML > 90 &&
+cell.innerHTML <= 100) {
cell.setAttribute('style', 'background-color:#336c12;color:white;');
} else if (+cell.innerHTML > 20 && (args.column as Column).field === 'progress') {
cell.setAttribute('style', 'background-color:#7b2b1d;color:white;');
}
}
public render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300'
queryCellInfo={this.customizeCell}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
<ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
customizeCell(args) {
const cell = args.cell;
if (args.column.field === 'progress' && +cell.innerHTML > 90 &&
+cell.innerHTML <= 100) {
cell.setAttribute('style', 'background-color:#336c12;color:white;');
}
else if (+cell.innerHTML > 20 && args.column.field === 'progress') {
cell.setAttribute('style', 'background-color:#7b2b1d;color:white;');
}
}
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300' queryCellInfo={this.customizeCell}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The auto wrap allows the cell content of the treegrid to wrap to the next line when it exceeds the boundary of the cell width. The Cell Content wrapping works based on the position of white space between words.
To enable auto wrap, set the allowTextWrap
property to true.
You can configure the auto wrap mode by setting the textWrapSettings.wrapMode
property.
There are three types of wrapMode. They are:
Note: When a column width is not specified, then auto wrap of columns will be adjusted with respect to the treegrid’s width.
In the following example, the textWrapSettings.wrapMode is set to Content.
import { TextWrapSettingsModel } 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';
export default class App extends React.Component<{}, {}>{
public settings: TextWrapSettingsModel = { wrapMode: 'Content' };
public render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300' allowTextWrap='true' textWrapSettings={this.settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='90'/>
<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>
}
}
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.settings = { wrapMode: 'Content' };
}
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300' allowTextWrap='true' textWrapSettings={this.settings}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='90'/>
<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>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
You can customize the treegrid cells by adding a CSS class to the customAttribute
property of the column.
.e-attr {
background: #d7f0f4;
}
public customAttr = {class: 'e-attr'};
<ColumnDirective
field="taskID" headerText="Task ID" customAttributes={this.customAttr} width="90" textAlign='Right'/>
In the below example, we have customized the cells of TaskID and StartDate columns.
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import './custom.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public customAttr = {class: 'e-attr'};
public render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' customAttributes={this.customAttr} width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180' />
<ColumnDirective field='startDate' headerText='Start Date' customAttributes={this.customAttr} width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
}
}
.e-attr {
background: #d7f0f4;
}
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import './custom.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.customAttr = { class: 'e-attr' };
}
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' customAttributes={this.customAttr} width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' customAttributes={this.customAttr} width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The gridLines
have option to display cell border and it can be defined by the
gridLines
property.
The available modes of grid lines are:
Modes | Actions |
---|---|
Both | Displays both the horizontal and vertical grid lines. |
None | No grid lines are displayed. |
Horizontal | Displays the horizontal grid lines only. |
Vertical | Displays the vertical grid lines only. |
Default | Displays grid lines based on the theme. |
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300' gridLines='Both'>
<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>
}
}
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300' gridLines='Both'>
<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>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
By default, the treegrid renders with Default mode.
The clip mode provides options to display its overflow cell content and it can be defined by the columns.clipMode
property.
There are three types of clipMode
. They are:
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { complexData } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return <TreeGridComponent dataSource={complexData} treeColumnIndex={1} childMapping='subtasks' height='300' gridLines='Both'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='70' clipMode='Clip'/>
<ColumnDirective field='assignee.firstName' headerText='Assignee' width='30' textAlign='Right' clipMode='Ellipsis' />
<ColumnDirective field='priority' headerText='Priority' width='30' textAlign='Right' clipMode='EllipsisWithTooltip' />
<ColumnDirective field='duration' headerText='Duration' width='30' textAlign='Right' />
</ColumnsDirective>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { complexData } from './datasource';
export default class App extends React.Component {
render() {
return <TreeGridComponent dataSource={complexData} treeColumnIndex={1} childMapping='subtasks' height='300' gridLines='Both'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='70' clipMode='Clip'/>
<ColumnDirective field='assignee.firstName' headerText='Assignee' width='30' textAlign='Right' clipMode='Ellipsis'/>
<ColumnDirective field='priority' headerText='Priority' width='30' textAlign='Right' clipMode='EllipsisWithTooltip'/>
<ColumnDirective field='duration' headerText='Duration' width='30' textAlign='Right'/>
</ColumnsDirective>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
By default,
columns.clipMode
value isEllipsis
.