How to switch the JavaScript DataGrid in mobile and desktop views

1 min read

This article explains how to switch the Javascript DataGrid in mobile and desktop views.

You can render the adaptive DataGrid based on your mobile and desktop devices by using the enableAdaptiveUI and rowRenderingMode properties of the Grid.
The rowRenderingMode property is used to render the grid row elements in the following directions:

Horizontal - Renders the grid row elements in the horizontal direction.
Vertical - Renders the grid row elements in the vertical direction.

Through the Grid load event, you can change the Grid view by dynamically modifying the enableAdaptiveUI and rowRenderingMode properties based on your device.

load: () => {
    if (ej.base.Browser.isDevice) {
       // Render the mobile Adaptive UI.
        grid.enableAdaptiveUI = true; // Here, “grid” is the instance of the Grid.
        grid.rowRenderingMode = 'Vertical';
        grid.element.parentElement.classList.add('e-bigger');
    } else {
        // Render the normal view. 
        grid.enableAdaptiveUI = false;
        grid.rowRenderingMode = 'Horizontal';
        grid.element.parentElement.classList.remove('e-bigger');
    }
}

If you want to switch to the Grid view in mobile or desktop while resizing the browser, you need to change the enableAdaptiveUI and rowRenderingMode properties in the window.resize event.

  window.addEventListener('resize', function (e) {
      if (grid) {
          if (ej.base.Browser.isDevice) {
              grid.enableAdaptiveUI = true;
              grid.rowRenderingMode = 'Vertical';
              grid.element.parentElement.classList.add('e-bigger');
          } else {
              grid.enableAdaptiveUI = false;
              grid.rowRenderingMode = 'Horizontal';
              grid.element.parentElement.classList.remove('e-bigger');
          }
      }
  });

Output

Grid-desktop

Description automatically generated with medium confidence