Adaptive in React Treegrid component

16 Sep 202312 minutes to read

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.

Render adaptive dialogs

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.

app.jsx

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';
function App() {
    const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
    const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
    const filterOptions = { type: 'Excel' };
    let treegrid;
    const load = () => {
      const ID = !Browser.isDevice ? 'adaptivebrowser' : 'adaptivedevice';
      treegrid = document.getElementById(ID).ej2_instances[0];
      treegrid.grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0];
    };
    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%'  enableAdaptiveUI={true} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={filterOptions} toolbar={toolbarOptions} editSettings={editSettings} load={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%'  enableAdaptiveUI={true} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={filterOptions} toolbar={toolbarOptions} editSettings={editSettings} load={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>);
}
;
export default App;

app.tsx

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';

function App() {
  const toolbarOptions: any = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
  const editSettings: any = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
  const filterOptions: any = { type: 'Excel' };
  let treegrid: TreeGridComponent;
  const load = (): void => {
    const ID: string = !Browser.isDevice ? 'adaptivebrowser' : 'adaptivedevice';
    treegrid = document.getElementById(ID).ej2_instances[0];
    treegrid.grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0] as HTMLElement;
  }
    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%'  enableAdaptiveUI={true} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={filterOptions} toolbar={toolbarOptions} editSettings={editSettings} load={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%'  enableAdaptiveUI={true} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={filterOptions} toolbar={toolbarOptions} editSettings={editSettings} load={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>
    )
};
export default App;

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