The Grid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens. This interface will render the filter, sort, and edit dialogs adaptively and have an option to render the Tree Grid row elements in the horizontal direction.
When you enable the enableAdaptiveUI
property, the grid will render the filter, sort, and edit dialogs in full screen for a better user experience. The following demo demonstrates this behaviour.
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Sort, Edit, Toolbar, Page } from '@syncfusion/ej2-react-treegrid';
import { Browser } from "@syncfusion/ej2-base";
import * as React from 'react';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
this.renderingMode = 'Vertical';
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
this.filterOptions = { type: 'Excel' };
}
load() {
this.grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0];
}
render() {
return (<div className='control-pane'>
<div className='control-section'>
<div className="col-md-9 e-bigger e-adaptive-demo">
{!Browser.isDevice ? (<div className="e-mobile-layout">
<div className="e-mobile-content">
<TreeGridComponent id="adaptivebrowser" dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='100%' ref={treegrid => this.treegridobj = treegrid} enableAdaptiveUI={true} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={this.filterOptions} toolbar={this.toolbarOptions} editSettings={this.editSettings} load={this.load}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' isPrimaryKey={true} width='135' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name' width='280'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration' width='140' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress' width='145' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter, Sort, Edit, Toolbar, Page]}/>
</TreeGridComponent>
</div>
</div>) : (<TreeGridComponent id="adaptivedevice" dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='100%' ref={treegrid => this.treegridobj = treegrid} enableAdaptiveUI={true} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={this.filterOptions} toolbar={this.toolbarOptions} editSettings={this.editSettings} load={this.load}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' isPrimaryKey={true} width='135' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name' width='280'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration' width='140' textAlign='Right'/>
<ColumnDirective field='progress' headerText='Progress' width='145' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter, Sort, Edit, Toolbar, Page]}/>
</TreeGridComponent>)}
</div>
</div>
</div>);
}
}
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, Filter, Sort, Edit, Toolbar, Page } from '@syncfusion/ej2-react-treegrid';
import { Browser } from "@syncfusion/ej2-base";
import * as React from 'react';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public treegridobj: TreeGridComponent;
public toolbarOptions: any = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
public renderingMode: any = 'Vertical';
public editSettings: any = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
public filterOptions: any = { type: 'Excel' };
public load(): void {
(this as any).grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0] as HTMLElement;
}
public render() {
return (
<div className='control-pane'>
<div className='control-section'>
<div className="col-md-9 e-bigger e-adaptive-demo">
{!Browser.isDevice ? (
<div className="e-mobile-layout">
<div className="e-mobile-content">
<TreeGridComponent id="adaptivebrowser" dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='100%' ref={treegrid => this.treegridobj = treegrid} enableAdaptiveUI={true} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={this.filterOptions} toolbar={this.toolbarOptions} editSettings={this.editSettings} load={this.load}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' isPrimaryKey={true} width='135' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name' width='280'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration' width='140' textAlign='Right' />
<ColumnDirective field='progress' headerText='Progress' width='145' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter, Sort, Edit, Toolbar, Page]} />
</TreeGridComponent>
</div>
</div>
) : (
<TreeGridComponent id="adaptivedevice" dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='100%' ref={treegrid => this.treegridobj = treegrid} enableAdaptiveUI={true} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={this.filterOptions} toolbar={this.toolbarOptions} editSettings={this.editSettings} load={this.load}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' isPrimaryKey={true} width='135' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name' width='280'></ColumnDirective>
<ColumnDirective field='duration' headerText='Duration' width='140' textAlign='Right' />
<ColumnDirective field='progress' headerText='Progress' width='145' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter, Sort, Edit, Toolbar, Page]} />
</TreeGridComponent>
)}
</div>
</div>
</div>
)
}
}
Please refer to our
React Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore ourReact Tree Grid example
to learn how to present and manipulate data.