ej:Grid is not responsive, layout is not getting changed based on screen resolution

[Venkatesh]

Dear Team,

I am using ej-grid control for binding the data, able to bind the data and resize the columns also.

Include respective responsive.css files and properties as required

Queries

1) If I am not specifying the width for the ej:grid, it is taking the width mentioned in scrollsettings property

2) The ej:grid is not responsive and it is not taking the width based on the browser.

Request you to help me in making the ej:grid responsive & specifying the width for the ej:grid.

Attached the code for reference.

Thanks & Regards,

Venkatesh Yellaboyina

Attachment: ej_grid_8cf89945.zip

[Manivannan Padmanaban]

Hi Venkatesh, 

Greetings from Syncfusion Support. 

Query 1:  

In our ejGrid, we don’t have any direct property called Width. To set the desire width to the grid, we suggest you to set the width in ScrollSettings. Refer to the below help documentation links, 

https://help.syncfusion.com/aspnet/grid/scrolling 

https://help.syncfusion.com/api/js/ejgrid#members:scrollsettings-width 

Query 2: Responsive issue 

From the shared code example, we could see that you have rendered the ejGrid inside table td. The grid parent element(i.e. table) was not responsive and so the grid was not resized based on browser size. So, in order to achieve your requirement we suggest you to make the table responsive by using the below styles. 

<table style="width:100%;table-layout:fixed;overflow:hidden"> 

……………………………………………… 

                     <td ……… > 

………………………………………………. 

                         <ej:Grid  ID="GridMatterDisplay" ……………> 

……………………………………………. 

                             <Columns> 

……………………………………….. 

                             </Columns> 

                             <ClientSideEvents Create="onGridCreate" RowDataBound="rowDataBound" QueryCellInfo="GridQueryCellInfoEvent" /> 

                              

                         </ej:Grid> 

…… 

                     </td> 

                 </tr> 

             </table> 

Please get back to us, if you need further assistance. We will be happy to assist you. 

Regards, 

Manivannan Padmanaban