We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ejGrid - enableResponsiveRow

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"}

]
});

3 Replies

AS Alan Sangeeth S Syncfusion Team July 27, 2015 12:59 PM UTC

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


SN Saquib Nisar July 27, 2015 01:27 PM UTC

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;


MS Madhu Sudhanan P Syncfusion Team July 28, 2015 12:26 PM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon