Responsive Grid help

Question

Hi,I've been trying to get my grid to be responsive, e.g. if a mobile device views the grid, the grid must render rows vertically and if a desktop browser views the grid it must render horizontally.I've been trying to follow the examples here: https://ej2.syncfusion.com/aspnetmvc/Grid/Adaptive#/tailwindand here: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/adaptive/But I am unable to understand exactly how to switch between rendering modes based on mobile or desktop.My grid is also set to normal editing mode. Could this be causing an issue with the adaptive UI display? If that's the case, can I then also switch between edit modes based on display device type?

Pavithra Subramaniyam · Accepted Answer

Hi Eddie, 
 
The “Total” displayed in summary cell with mobile mode might be the header text of the “LineTotal” column. You can remove this text inside the “dataBound’ event of Grid component as below. 
 




function dataBound() { 
  var grid = document.getElementById('Grid').ej2_instances[0]; 
  if (ej.base.Browser.isDevice) { 
    let summaryCell = grid.element.querySelectorAll('.e-summarycell'); 
    for (var i = 0; i < summaryCell.length; i++) { 
      summaryCell[i].setAttribute('data-cell', ''); 
    } 
  } 
} 
 
 
API: https://ej2.syncfusion.com/javascript/documentation/api/grid/#databound 
 
Regards, 
Pavithra S

Pavithra Subramaniyam · Answer

Hi Eddie, 
 
Thanks for contacting Syncfusion support. 
 
You can show the Grid rows vertically based on the device by using the “rowRenderingMode” property. The vertical row rendering mode supports only the Dialog editing. Show while rendering in desktop you can set the editSettings.mode as “Normal” otherwise it should be “Dialog”. Please refer to the below code example and API link for more information. 
 




// grid load event triggeres while grid initial loading 
function load() { 
        var grid = document.getElementById('Grid').ej2_instances[0]; 
        if (ej.base.Browser.isDevice) { // true for mobile device 
            grid.rowRenderingMode = 'Vertical'; 
            grid.editSettings.mode = 'Dialog'; 
        } else { 
            // for Desktop 
            grid.rowRenderingMode = 'Horizontal'; 
            grid.editSettings.mode = 'Normal'; 
        } 
    } 
 
API: https://ej2.syncfusion.com/documentation/api/grid/#rowrenderingmode 
        https://ej2.syncfusion.com/documentation/api/grid/#load 
        https://ej2.syncfusion.com/documentation/api/grid/editSettingsModel/#mode 
 
Please get back to us if you need further assistance on this 
 
Regards, 
Pavithra S

Eddie Willcox · Answer

Thanks for this, but my grid still renders as if it's a desktop browser on mobile. Please can you point out where I'm going wrong? @Html.EJS().Grid("products").DataSource((IEnumerable

Joseph Christ Nithin Issack · Answer

Hi Eddie, Thanks for your update. Based on your requirement, you want to render the grid rows vertically. Your requirement can be achieved by enabling the `enableAdaptiveUI` property of the EJ2 grid and then set the `rowRenderingMode` property of the EJ2 grid as `Vertical` and add the `e-bigger` class to the parent container in the `load` event of the EJ2 grid. Please refer the below code example.

@Html.EJS().Grid("Grid").DataSource((IEnumerable

Eddie Willcox · Answer

Thank you so much. This did the trick.One last question:Is it possible to set the text alignment in the grid for both headers and data rows to be left aligned instead of center aligned when it is a mobile browser?Then center alignment is causing everything to render weirdly and it does not look so good.

Pavithra Subramaniyam · Answer

Hi Eddie, 
 
You can set the column alignment for mobile browser by setting the column.textAlign Property inside the load event of Grid component. Please refer to the blow code example for more information. 
 




function onLoad() {  
        var gridObj = document.getElementById('Grid').ej2_instances[0]  
        if (ej.base.Browser.isDevice) {  
             grid.columns.map((e)=>{ 
                    if(e.textAlign == "Center"){ 
                    e.textAlign ="Left"; 
                    } 
                }) 
       }  
        else {   
               grid.columns.map((e)=>{ 
                    if(e.textAlign == "Left"){ 
                    e.textAlign ="Center"; 
                    } 
                }) 
        }  
    }  
 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Pavithra S

Eddie Willcox · Answer

Thank you. One last question. Is it possible to change text in the aggregate columns? This is what my aggregates look like in the code:

agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "LineTotal", Format = "C2", Type = "Sum", FooterTemplate = "Excl Total: ${Sum}" } }).Add();

agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "LineTotal", Format = "C2", Type = "Custom", FooterTemplate = "VAT: ${Custom}", CustomAggregate = "vatFn" } }).Add();

agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "LineTotal", Format = "C2", Type = "Custom", FooterTemplate = "Total: ${Custom}", CustomAggregate = "totalFn" } }).Add();

In desktop browser, the aggregates are displayed correctly as

"Excl Total: value"

"VAT: value"

"Total: value"

but in mobile mode it is displayed as:

"Total Excl Total: value"

"Total VAT: value"

"Total Total: value"

I need the first "Total " in the above to not display and only display the aggregates as I have set them

Eddie Willcox · Answer

Perfect. Thank you so much

Eddie Willcox · Answer

I spoke too soon. If I do not edit any data, your solution works fine. As soon as I edit a row in mobile browser, the "TOTAL" text comes back exactly the way it was.

Pavithra Subramaniyam · Answer

Hi Eddie, 
 
We have tried to reproduce the issue at our side, but the summary cell text is working fine as expected. Since we customize the cells inside the dataBound event it will work for grid refresh too. So could you please share the issue reproducible sample or hosted link for validate the scenario and provide you a solution as early as possible. 
 
Regards, 
Pavithra S