Adaptive in React Grid component

17 Mar 202524 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, column chooser, column menu(supports only when the rowRenderingMode as Horizontal) and edit dialogs adaptively and have an option to render the grid row elements in the vertical direction.

Render adaptive dialogs

The Syncfusion® React Grid offers a valuable feature for rendering adaptive dialogs, specifically designed to enhance the user experience on smaller screens. This feature proves especially useful for optimizing the interface on devices with limited screen real estate. The functionality is achieved by enabling the enableAdaptiveUI property, allowing the grid to render filter, sort, and edit dialogs in full-screen mode.

Additionally, apply the e-bigger class to the grid’s parent element to enable the adaptive view.

The following sample demonstrates how to enable and utilize adaptive dialogs in the Syncfusion® React Grid:

import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Filter, Sort, Edit, Toolbar, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
    const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
    const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
    const validationRule = { required: true };
    const orderidRules = { required: true, number: true };
    const filterOptions = { type: 'Excel' };
    let grid;
    const load = () => {
        grid = document.getElementById('adaptivebrowser').ej2_instances[0];
        grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0];
    };
    let menuFilter = { type: 'Menu' };
    let checkboxFilter = { type: 'CheckBox' };
    return (<div className="e-adaptive-demo e-bigger">
              <div className="e-mobile-layout">
                <div className="e-mobile-content">
                    <GridComponent id="adaptivebrowser" dataSource={data} height='100%' ref={g => grid = g} enableAdaptiveUI={true} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={filterOptions} toolbar={toolbarOptions} editSettings={editSettings} load={load}>
                      <ColumnsDirective>
                        <ColumnDirective field='SNO' headerText='S NO' width='150' isPrimaryKey={true} validationRules={orderidRules}></ColumnDirective>
                        <ColumnDirective field='Model' headerText='Model Name' width='200' editType='dropdownedit' validationRules={validationRule}/>
                        <ColumnDirective field='Developer' headerText='Developer' width='200' filter={menuFilter} validationRules={validationRule}></ColumnDirective>
                        <ColumnDirective field='ReleaseDate' headerText='Released Date' editType='datepickeredit' type='date' format='yMMM' width='200'></ColumnDirective>
                        <ColumnDirective field='AndroidVersion' headerText='Android Version' width='200' filter={checkboxFilter} validationRules={validationRule}></ColumnDirective>
                      </ColumnsDirective>
                      <Inject services={[Filter, Sort, Edit, Toolbar, Page]}/>
                    </GridComponent>
                </div>
              </div>
              <br></br>
                <div className="datalink">Source:
                  <a href="https://en.wikipedia.org/wiki/List_of_Android_smartphones" target="_blank">Wikipedia: List of Android smartphones</a>
                </div>
              </div>);
}
export default App;
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, EditSettingsModel, ToolbarItems, FilterSettingsModel } from '@syncfusion/ej2-react-grids';
import { Filter, Sort, Edit, Toolbar, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

function App() {
  const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
  const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
  const validationRule: Object = { required: true };
  const orderidRules: Object = { required: true, number: true };
  const filterOptions: FilterSettingsModel = { type: 'Excel' };
  let grid: GridComponent;
  const load = (): void => {
    grid = (document.getElementById('adaptivebrowser') as HTMLFormElement).ej2_instances[0];
    grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0] as HTMLElement;
  }
   let menuFilter = { type: 'Menu' };
   let checkboxFilter = { type: 'CheckBox' };
      return (<div className="e-adaptive-demo e-bigger">
              <div className="e-mobile-layout">
                <div className="e-mobile-content">
                    <GridComponent id="adaptivebrowser" dataSource={data} height='100%' ref={g => grid = g} enableAdaptiveUI={true} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={filterOptions} toolbar={toolbarOptions} editSettings={editSettings} load={load}>
                      <ColumnsDirective>
                        <ColumnDirective field='SNO' headerText='S NO' width='150' isPrimaryKey={true} validationRules={orderidRules}></ColumnDirective>
                        <ColumnDirective field='Model' headerText='Model Name' width='200' editType='dropdownedit' validationRules={validationRule} />
                        <ColumnDirective field='Developer' headerText='Developer' width='200' filter={menuFilter} validationRules={validationRule}></ColumnDirective>
                        <ColumnDirective field='ReleaseDate' headerText='Released Date' editType='datepickeredit' type='date' format='yMMM' width='200'></ColumnDirective>
                        <ColumnDirective field='AndroidVersion' headerText='Android Version' width='200' filter={checkboxFilter} validationRules={validationRule}></ColumnDirective>
                      </ColumnsDirective>
                      <Inject services={[Filter, Sort, Edit, Toolbar, Page]} />
                    </GridComponent>
                </div>
              </div>
              <br></br>
                <div className="datalink">Source:
                  <a href="https://en.wikipedia.org/wiki/List_of_Android_smartphones"
                    target="_blank">Wikipedia: List of Android smartphones</a>
                </div>
              </div>
            )
}
export default App;
export let data = [
    { "Model": "Samsung Galaxy", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2009-03-31T18:30:00.000Z"), "AndroidVersion": "Android 1.5 \"Cupcake\"", "SNO": 1 },
    { "Model": "Samsung Galaxy A01", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2019-12-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 2 },
    { "Model": "Samsung Galaxy A01 Core", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2020-07-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 3 },
    { "Model": "Samsung Galaxy A02", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2020-12-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 4 },
    { "Model": "Samsung Galaxy A2 Core", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2019-03-31T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 5 },
    { "Model": "Samsung Galaxy A02s/M02s", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2020-12-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 6 },
    { "Model": "Samsung Galaxy A3 (2016)/A5 (2016)/A7 (2016)", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2015-11-30T18:30:00.000Z"), "AndroidVersion": "Android 5.0 \"Lollipop\"", "SNO": 7 },
    { "Model": "Samsung Galaxy A3 (2017)/A5 (2017)/A7 (2017)", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2016-12-31T18:30:00.000Z"), "AndroidVersion": "Android 6.0 \"Marshmallow\"", "SNO": 8 },
    { "Model": "Samsung Galaxy A3/Duos", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2014-11-30T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 9 },
    { "Model": "Samsung Galaxy A5", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2014-11-30T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 10 },
    { "Model": "Samsung Galaxy A5 Duos", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2014-10-31T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 11 },
    { "Model": "Samsung Galaxy A6/+", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2018-04-30T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 12 },
    { "Model": "Samsung Galaxy A6s", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2018-10-31T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 13 },
    { "Model": "Samsung Galaxy A7 (2018)", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2018-09-30T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 14 },
    { "Model": "Samsung Galaxy A7/Duos", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2015-01-31T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 15 }
];
export let data: Object[] = [
    { "Model": "Samsung Galaxy", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2009-03-31T18:30:00.000Z"), "AndroidVersion": "Android 1.5 \"Cupcake\"", "SNO": 1 },
    { "Model": "Samsung Galaxy A01", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2019-12-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 2 },
    { "Model": "Samsung Galaxy A01 Core", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2020-07-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 3 },
    { "Model": "Samsung Galaxy A02", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2020-12-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 4 },
    { "Model": "Samsung Galaxy A2 Core", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2019-03-31T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 5 },
    { "Model": "Samsung Galaxy A02s/M02s", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2020-12-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 6 },
    { "Model": "Samsung Galaxy A3 (2016)/A5 (2016)/A7 (2016)", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2015-11-30T18:30:00.000Z"), "AndroidVersion": "Android 5.0 \"Lollipop\"", "SNO": 7 },
    { "Model": "Samsung Galaxy A3 (2017)/A5 (2017)/A7 (2017)", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2016-12-31T18:30:00.000Z"), "AndroidVersion": "Android 6.0 \"Marshmallow\"", "SNO": 8 },
    { "Model": "Samsung Galaxy A3/Duos", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2014-11-30T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 9 },
    { "Model": "Samsung Galaxy A5", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2014-11-30T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 10 },
    { "Model": "Samsung Galaxy A5 Duos", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2014-10-31T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 11 },
    { "Model": "Samsung Galaxy A6/+", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2018-04-30T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 12 },
    { "Model": "Samsung Galaxy A6s", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2018-10-31T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 13 },
    { "Model": "Samsung Galaxy A7 (2018)", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2018-09-30T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 14 },
    { "Model": "Samsung Galaxy A7/Duos", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2015-01-31T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 15 }
];

Vertical row rendering

The Syncfusion® React Grid introduces the feature of vertical row rendering, allowing you to display row elements in a vertical order. This is particularly useful for scenarios where a vertical presentation enhances data visibility. This is achieved by setting the rowRenderingMode property to the value Vertical.

The default row rendering mode is Horizontal.

The following sample demonstrates how to dynamically change the row rendering mode between Vertical and Horizontal based on a DropDownList selection:

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateColumnDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Filter, Sort, Edit, Toolbar, Aggregate, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

function App() {
  const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
  const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
  const validationRule = { required: true };
  const orderidRules = { required: true, number: true };
  const filterOptions = { type: 'Excel' };
  const renderingMode = 'Vertical';
  const dropDownData = [
    { text: 'Vertical', value: 'Vertical' },
    { text: 'Horizontal', value: 'Horizontal' },
  ];
  let grid;
  const created = () => {
    grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0];
  }
  const changeAlignment = (args) => {
    grid.rowRenderingMode = args.value
  }
  const footerSum = (props) => {
    return (<span>Total Models: {props.Count}</span>);
  };
  let menuFilter = { type: 'Menu' };
  let checkboxFilter = { type: 'CheckBox' };
  return (<div>
    <div>
      <label style={{ padding: "30px 17px 0 0" }}> Select row rendering mode :</label>
      <DropDownListComponent index={0} width={150} dataSource={dropDownData} change={changeAlignment}></DropDownListComponent>
    </div>
    <div className="e-adaptive-demo e-bigger">
      <div className="e-mobile-layout">
        <div className="e-mobile-content">
          <GridComponent id="adaptivebrowser" dataSource={data} height='100%' ref={g => grid = g} enableAdaptiveUI={true} rowRenderingMode={renderingMode} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={filterOptions} toolbar={toolbarOptions} editSettings={editSettings} created={created}>
            <ColumnsDirective>
              <ColumnDirective field='SNO' headerText='S NO' width='150' isPrimaryKey={true} validationRules={orderidRules}></ColumnDirective>
              <ColumnDirective field='Model' headerText='Model Name' width='200' editType='dropdownedit' validationRules={validationRule} />
              <ColumnDirective field='Developer' headerText='Developer' width='200' filter={menuFilter} validationRules={validationRule}></ColumnDirective>
              <ColumnDirective field='ReleaseDate' headerText='Released Date' editType='datepickeredit' type='date' format='yMMM' width='200'></ColumnDirective>
              <ColumnDirective field='AndroidVersion' headerText='Android Version' width='200' filter={checkboxFilter} validationRules={validationRule}></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Filter, Sort, Edit, Toolbar, Aggregate, Page]} />
            <AggregatesDirective>
              <AggregateDirective>
                <AggregateColumnsDirective>
                  <AggregateColumnDirective field='Model' type='Count' footerTemplate={footerSum}> </AggregateColumnDirective>
                </AggregateColumnsDirective>
              </AggregateDirective>
            </AggregatesDirective>
          </GridComponent>
        </div>
      </div>
      <br></br>
      <div className="datalink">Source:
        <a href="https://en.wikipedia.org/wiki/List_of_Android_smartphones"
          target="_blank">Wikipedia: List of Android smartphones</a>
      </div>
    </div></div>
  )
}
export default App;
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, FilterSettingsModel, EditSettingsModel, ToolbarItems, RowRenderingDirection } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateColumnDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Filter, Sort, Edit, Toolbar, Aggregate, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

function App() {
  const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
  const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
  const validationRule: Object = { required: true };
  const orderidRules: Object = { required: true, number: true };
  const filterOptions: FilterSettingsModel = { type: 'Excel' };
  const renderingMode: string = 'Vertical';
  const dropDownData: Object[] = [
    { text: 'Vertical', value: 'Vertical' },
    { text: 'Horizontal', value: 'Horizontal' },
  ];
  let grid: GridComponent | null;
  const created = (): void => {
    (grid as GridComponent).adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0] as HTMLElement;
  }
  const changeAlignment = (args: ChangeEventArgs) => {
    (grid as GridComponent).rowRenderingMode = (args.value as RowRenderingDirection)
  }
  const footerSum = (props) => {
    return (<span>Total Models: {props.Count}</span>);
  };
  let menuFilter = { type: 'Menu' };
  let checkboxFilter = { type: 'CheckBox' };
  return (<div>
    <div>
      <label style={{ padding: "30px 17px 0 0" }}> Select row rendering mode :</label>
      <DropDownListComponent index={0} width={150} dataSource={dropDownData} change={changeAlignment}></DropDownListComponent>
    </div>
    <div className="e-adaptive-demo e-bigger">
      <div className="e-mobile-layout">
        <div className="e-mobile-content">
          <GridComponent id="adaptivebrowser" dataSource={data} height='100%' ref={g => grid = g} enableAdaptiveUI={true} rowRenderingMode={renderingMode} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={filterOptions} toolbar={toolbarOptions} editSettings={editSettings} created={created}>
            <ColumnsDirective>
              <ColumnDirective field='SNO' headerText='S NO' width='150' isPrimaryKey={true} validationRules={orderidRules}></ColumnDirective>
              <ColumnDirective field='Model' headerText='Model Name' width='200' editType='dropdownedit' validationRules={validationRule} />
              <ColumnDirective field='Developer' headerText='Developer' width='200' filter={menuFilter} validationRules={validationRule}></ColumnDirective>
              <ColumnDirective field='ReleaseDate' headerText='Released Date' editType='datepickeredit' type='date' format='yMMM' width='200'></ColumnDirective>
              <ColumnDirective field='AndroidVersion' headerText='Android Version' width='200' filter={checkboxFilter} validationRules={validationRule}></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Filter, Sort, Edit, Toolbar, Aggregate, Page]} />
            <AggregatesDirective>
              <AggregateDirective>
                <AggregateColumnsDirective>
                  <AggregateColumnDirective field='Model' type='Count' footerTemplate={footerSum}> </AggregateColumnDirective>
                </AggregateColumnsDirective>
              </AggregateDirective>
            </AggregatesDirective>
          </GridComponent>
        </div>
      </div>
      <br></br>
      <div className="datalink">Source:
        <a href="https://en.wikipedia.org/wiki/List_of_Android_smartphones"
          target="_blank">Wikipedia: List of Android smartphones</a>
      </div>
    </div></div>
  )
}
export default App;
export let data = [
    { "Model": "Samsung Galaxy", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2009-03-31T18:30:00.000Z"), "AndroidVersion": "Android 1.5 \"Cupcake\"", "SNO": 1 },
    { "Model": "Samsung Galaxy A01", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2019-12-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 2 },
    { "Model": "Samsung Galaxy A01 Core", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2020-07-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 3 },
    { "Model": "Samsung Galaxy A02", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2020-12-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 4 },
    { "Model": "Samsung Galaxy A2 Core", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2019-03-31T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 5 },
    { "Model": "Samsung Galaxy A02s/M02s", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2020-12-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 6 },
    { "Model": "Samsung Galaxy A3 (2016)/A5 (2016)/A7 (2016)", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2015-11-30T18:30:00.000Z"), "AndroidVersion": "Android 5.0 \"Lollipop\"", "SNO": 7 },
    { "Model": "Samsung Galaxy A3 (2017)/A5 (2017)/A7 (2017)", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2016-12-31T18:30:00.000Z"), "AndroidVersion": "Android 6.0 \"Marshmallow\"", "SNO": 8 },
    { "Model": "Samsung Galaxy A3/Duos", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2014-11-30T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 9 },
    { "Model": "Samsung Galaxy A5", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2014-11-30T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 10 },
    { "Model": "Samsung Galaxy A5 Duos", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2014-10-31T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 11 },
    { "Model": "Samsung Galaxy A6/+", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2018-04-30T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 12 },
    { "Model": "Samsung Galaxy A6s", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2018-10-31T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 13 },
    { "Model": "Samsung Galaxy A7 (2018)", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2018-09-30T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 14 },
    { "Model": "Samsung Galaxy A7/Duos", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2015-01-31T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 15 }
];
export let data: Object[] = [
    { "Model": "Samsung Galaxy", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2009-03-31T18:30:00.000Z"), "AndroidVersion": "Android 1.5 \"Cupcake\"", "SNO": 1 },
    { "Model": "Samsung Galaxy A01", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2019-12-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 2 },
    { "Model": "Samsung Galaxy A01 Core", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2020-07-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 3 },
    { "Model": "Samsung Galaxy A02", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2020-12-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 4 },
    { "Model": "Samsung Galaxy A2 Core", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2019-03-31T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 5 },
    { "Model": "Samsung Galaxy A02s/M02s", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2020-12-31T18:30:00.000Z"), "AndroidVersion": "Android 10", "SNO": 6 },
    { "Model": "Samsung Galaxy A3 (2016)/A5 (2016)/A7 (2016)", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2015-11-30T18:30:00.000Z"), "AndroidVersion": "Android 5.0 \"Lollipop\"", "SNO": 7 },
    { "Model": "Samsung Galaxy A3 (2017)/A5 (2017)/A7 (2017)", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2016-12-31T18:30:00.000Z"), "AndroidVersion": "Android 6.0 \"Marshmallow\"", "SNO": 8 },
    { "Model": "Samsung Galaxy A3/Duos", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2014-11-30T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 9 },
    { "Model": "Samsung Galaxy A5", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2014-11-30T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 10 },
    { "Model": "Samsung Galaxy A5 Duos", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2014-10-31T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 11 },
    { "Model": "Samsung Galaxy A6/+", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2018-04-30T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 12 },
    { "Model": "Samsung Galaxy A6s", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2018-10-31T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 13 },
    { "Model": "Samsung Galaxy A7 (2018)", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2018-09-30T18:30:00.000Z"), "AndroidVersion": "Android 8.0 \"Oreo\"", "SNO": 14 },
    { "Model": "Samsung Galaxy A7/Duos", "Developer": "Samsung Electronics", "ReleaseDate": new Date("2015-01-31T18:30:00.000Z"), "AndroidVersion": "Android 4.4 \"KitKat\"", "SNO": 15 }
];

Supported features by vertical row rendering

The following features are only supported in vertical row rendering:

  • Paging, including Page size dropdown
  • Sorting
  • Filtering
  • Selection
  • Dialog Editing
  • Aggregate
  • Infinite scroll
  • Toolbar - Options like Add, Filter, Sort, Edit, Delete, Search, and Toolbar template are available when their respective features are enabled. The toolbar dynamically includes a three-dotted icon, containing additional features like ColumnChooser, Print, PdfExport, ExcelExport, or CsvExport, once these features are enabled. Please refer to the following snapshot.

VerticalmodeColumnMenu

A snapshot of the adaptive grid displaying enabled paging along with a pager dropdown.

AdaptivePagerDropdown

The Column Menu feature, which includes grouping, sorting, autofit, filter, and column chooser, is exclusively supported for the Grid in Horizontal rowRenderingMode.

Rendering an adaptive layout for smaller screens alone

By default, adaptive UI layout is rendered in both mobile devices and desktop mode too while setting the enableAdaptiveUI property as true. Now the DataGrid component has an option to render an adaptive layout only for mobile screen sizes. This can be achieved by specifying the AdaptiveUIMode property value as Mobile. The default value of the AdaptiveUIMode property is “Both”.

The rowRenderingMode property is rendered on the adaptive layout based on the AdaptiveUIMode property.

import { ColumnDirective, ColumnsDirective, GridComponent, Inject, } from '@syncfusion/ej2-react-grids';
import { Filter, Sort, Edit, Toolbar, Page, ColumnChooser, Group, ExcelExport, PdfExport } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

function App() {
  const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
  const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search', 'ColumnChooser', 'ExcelExport', 'PdfExport'];
  const customeridRule = { required: true };
  const freightRule = { required: true };
  const orderidRules = { required: true, number: true };
  const filterOptions = { type: 'Excel' };
  const selectionSettings = { type: 'Multiple' };
  const dateFormat = { type: 'dateTime', format: 'M/d/y hh:mm a' };
  const adaptiveUIMode = 'Mobile'
  let grid;
  const created = () => {
    grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0];
  }
  function toolbarClick(args) {
    switch (args.item.id) {
      case 'Grid_pdfexport':
        grid.pdfExport();
        break;
      case 'Grid_excelexport':
        grid.excelExport();
        break;
    }
  }
  return (
    <div className="e-adaptive-demo e-bigger">
      <div className="e-mobile-layout">
        <div className="e-mobile-content">
          <GridComponent id="Grid" dataSource={data} height='100%' ref={g => grid = g} enableAdaptiveUI={true} adaptiveUIMode={adaptiveUIMode}
            allowFiltering={true} allowSorting={true} allowPaging={true} allowGrouping={true} showColumnChooser={true} allowSelection={true} selectionSettings={selectionSettings} 
            filterSettings={filterOptions} toolbar={toolbarOptions} editSettings={editSettings} allowExcelExport={true} allowPdfExport={true} created={created} toolbarClick={toolbarClick}>
              <ColumnsDirective>
              <ColumnDirective field='OrderID' headerText='Order ID' width='150' textAlign='Right' validationRules={orderidRules} isPrimaryKey={true}></ColumnDirective>
              <ColumnDirective field='CustomerID' headerText='Customer Name' width='160' minWidth='80' maxWidth='300' validationRules={customeridRule}></ColumnDirective>
              <ColumnDirective field='Freight' headerText='Freight' width='150' minWidth='80' maxWidth='300' format='C2' textAlign='Right' validationRules={freightRule} editType='numericedit' ></ColumnDirective>
              <ColumnDirective field='OrderDate' headerText='Order Date' format={dateFormat} width='170' editType='datepickeredit'></ColumnDirective>
              <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></ColumnDirective>
              </ColumnsDirective>
              <Inject services={[Filter, Sort, Edit, Group, Toolbar, Page, ColumnChooser, ExcelExport, PdfExport]} />
            </GridComponent>
        </div>
      </div>
    </div>
  )
}
export default App;
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, FilterSettingsModel, EditSettingsModel, ToolbarItems, SelectionSettingsModel } from '@syncfusion/ej2-react-grids';
import { Filter, Sort, Edit, Toolbar, Page, ColumnChooser, Group, ExcelExport, PdfExport } from '@syncfusion/ej2-react-grids';
 import { ClickEventArgs } from '@syncfusion/ej2-navigations'
import * as React from 'react';
import { data } from './datasource';

function App() {
  
  const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
  const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search', 'ColumnChooser', 'ExcelExport', 'PdfExport'];
  const customeridRule: Object = { required: true };
  const freightRule: Object = { required: true };
  const orderidRules: Object = { required: true, number: true };
  const filterOptions: FilterSettingsModel = { type: 'Excel' };
  const selectionSettings: SelectionSettingsModel = { type: 'Multiple' };
  const dateFormat: Object = { type: 'dateTime', format: 'M/d/y hh:mm a' };
  const adaptiveUIMode: String = 'Mobile'
  let grid: GridComponent | null;
  const created = (): void => {
    (grid as GridComponent).adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0] as HTMLElement;
  }
  function toolbarClick(args: ClickEventArgs): void {
    switch (args.item.id) {
      case 'Grid_pdfexport':
        grid.pdfExport();
        break;
      case 'Grid_excelexport':
        grid.excelExport();
        break;
      
    }
  }
  return (
    <div className="e-adaptive-demo e-bigger">
      <div className="e-mobile-layout">
        <div className="e-mobile-content">
          <GridComponent id="Grid" dataSource={data} height='100%' ref={g => grid = g} enableAdaptiveUI={true} adaptiveUIMode={adaptiveUIMode}
          allowFiltering={true} allowSorting={true} allowPaging={true} allowGrouping={true} showColumnChooser={true} allowSelection={true} selectionSettings={selectionSettings} 
          filterSettings={filterOptions} toolbar={toolbarOptions} editSettings={editSettings} allowExcelExport={true} allowPdfExport={true} created={created} toolbarClick={toolbarClick}>
            <ColumnsDirective>
            <ColumnDirective field='OrderID' headerText='Order ID' width='150' textAlign='Right' validationRules={orderidRules} isPrimaryKey={true}></ColumnDirective>
            <ColumnDirective field='CustomerID' headerText='Customer Name' width='160' minWidth='80' maxWidth='300' validationRules={customeridRule}></ColumnDirective>
            <ColumnDirective field='Freight' headerText='Freight' width='150' minWidth='80' maxWidth='300' format='C2' textAlign='Right' validationRules={freightRule} editType='numericedit' ></ColumnDirective>
            <ColumnDirective field='OrderDate' headerText='Order Date' format={dateFormat} width='170' editType='datepickeredit'></ColumnDirective>
            <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Filter, Sort, Edit, Group, Toolbar, Page, ColumnChooser, ExcelExport, PdfExport]} />
          </GridComponent>
        </div>
      </div>
    </div>
  )
}
export default App;
export let data = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }
];
export let data: Object[] = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }];