How to switch the JavaScript DataGrid in mobile and desktop views

1 min read

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 changing the enableAdaptiveUI and rowRenderingMode properties dynamically 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, then 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');
          }
      }
  });