ejGrid - enableResponsiveRow

[Saquib Nisar]

Hi

I finally have a working adaptive gird, with eableResponsiveRow set to true.

However, the based table only appears once I've shrunk my display down to a width of around 350px.  Most of the columns in my grid cannot show all the data within them well before this point.

Is there a setting somewhere which defines at what level the responsive row starts to appear ?

Thanks!

Snippet of code;

$("#ContractsGrid").ejGrid({
    dataSource: data.Orders,
    allowPaging: true,
    allowSorting: true,
    allowGrouping: true,
    allowFiltering: true,
    isResponsive: true,
    enableResponsiveRow: true,
    columns: [
        { field: "CLASS_DESCRIPTION", headerText:"Class" },
        { field: "ORDER_REFERENCE_NUMBER", headerText: "Order Ref." },
        { field: "DATE_ENTERED" , headerText: "Order Date" },
        { field: "PACKAGED_ITEM_DESCRIPTION", headerText: "Product"},
        { field: "DELIVERED_QUANTITY", headerText: "Delivered Qty"}

    ]
});

[Alan Sangeeth S]

Hi Saquib,

Thanks for using Syncfusion products.

We can use the Grid property “minWidth” to determine when the Responsive row occurs. Please refer the following code snippets.

$("#Grid").ejGrid({
…
minWidth:600,

isResponsive:true,

enableResponsiveRow:true,

})

Please let us know if you have any queries.

Regards,
Alan Sangeeth S

[Saquib Nisar]

That does not work for me.

In fact, to get this working, I've modified the hard coded value in ejgrid.responsive.css as follows;

@media (max-width :400px) {
    .e-grid.e-responsive > [id*='Dlg_wrapper'] {
        width: 130px !important;

[Madhu Sudhanan P]

Hi Saquib,

Essential JavaScript Grid don’t have in-built support to explicitly set the width to render the responsive detailed rows. And hence you can use the workaround that you provided in your previous update to provide the width to render the responsive row.

@media (max-width :400px) {
    .e-grid.e-responsive > [id*='Dlg_wrapper'] {
        width: 130px !important;
}
. . . .  . .
}

Please let us know if you have any queries.

Regards,
Madhu Sudhanan. P