Grid's width does not change if I zoomed in or zoomed out

[Nishant Balami]

Hello there,

I have a couple questions. 

First, I am using a syncfusion grid in my project. While resizing the size of the window, the size of the grid remains the same. How would we solve it?

Grid on 100% zoom level:

If I decrease the zoom level to 80%, the grid appears like:

Did you notice the empty space in the right side? How would we fix it?

Second question, I am also using the inline edit form here. Whenever I double click on the row, it opens. However, the 'Save' and 'Cancel' buttons appear in the right most part. A screenshot of it is below.

I need them to be in the left most part. How do we do it?

Thank you.

[Thavasianand Sankaranarayanan]

Hi Nishant, 

Thanks for contacting Syncfusion support. 

Query 1: While resizing the size of the window, the size of the grid remains the same. 

 

We have analyzed your query and we suspect that while resizing the browser window then the Grid size remains the same. So, we suggest you to use the responsive Grid by enabling the isResponsive and minWIdth property of ejGrid control. 

 

Refer the help documentation. 

 

Link: https://help.syncfusion.com/api/js/ejgrid#members:isresponsive 

 

Link: https://help.syncfusion.com/api/js/ejgrid#members:minwidth 

 

Query 3: If I decrease the zoom level to 80%, there is an empty space in Grid. 

 

We have render the Grid in tab and while change the zoom level to 80%, the grid appears normally. We are unable to reproduce the issue. 

 

Please provide the following detail for better assistance. 

 

1. Share the Grid code example.
2. Clear explanation of replication procedure.
3. Essential studio version.
4. If possible share the sample or reproduce the issue in the attached sample.

 

We have prepared a sample and it can be downloadable from the below location. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/129620/ze/SyncfusionMvcApplication131502183970 

  

Query 2: Need to show the 'Save' and 'Cancel' buttons appear in the left most part. 

 

We have analyzed your query and we suspect that you want to show the save and cancel button in the left most corner.  

We have achieved the same by applying the float value as “left” for the inline form buttons. 

Refer the below code example. 

<style type="text/css"> 

       .e-grid .e-inlineformedit .e-editform-btn { 

              float: left !important; // show the button in left side using float property 

       } 

</style> 

Regards, 

Thavasianand S.