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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ejGrid - enableResponsiveRow

Thread ID:

Created:

Updated:

Platform:

Replies:

119721 Jul 24,2015 11:44 AM UTC Jul 28,2015 12:26 PM UTC JavaScript 3
loading
Tags: ejGrid
Saquib Nisar
Asked On July 24, 2015 11:44 AM UTC

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 [Syncfusion]
Replied On 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

Saquib Nisar
Replied On 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;

Madhu Sudhanan P [Syncfusion]
Replied On 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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;