Grid to resize to the screen/window size

[Michael Lambert]

I want the grid to be sized so that the whole grid (including scrollbars) are display on the screen no matter what the screen/window size is and have it resize if the user resizes the window.  I understand that if the user has the window sized really small that most data will not be able to be displayed, but I don't want the user to have to use the windows scrollbars to get to the Grid scrollbars.

Mike

[Mani Sankar Durai]

Hi Mike, 

Thanks for contacting Syncfusion support, 

 

We have analyzed your query and we can resize the grid based on window resizing by using Responsive feature of Grid. To enable responsiveness in Grid we need to set IsResponsive property as true and also it is necessary to mention MinWidth property in grid.  

Please refer the below code example. 

[Index.cshtml] 

@(Html.EJ().Grid<object>("Grid") 

             ... 

               .MinWidth(400) 

               .IsResponsive(true) 

              ... 

        

       .Columns(col => 

       { 

... 

            })) 

 

We have also prepared a sample that can be downloaded from the below link. 

Link: http://www.syncfusion.com/downloads/support/forum/127460/ze/EntityCodeFirst-767008681 

Also please refer the documentation to know the necessity of MinWidth property and IsResponsive in grid. 

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

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

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[Michael Lambert]

Hi Manisankar,
That works great for the width, but not the height.  The grid runs past the height of the window where you have a scrollbar for both window and then the grid.  I can set the Height in the ScrollSetting to accomplish what I need, but then it is not adaptive to the different size screens and windows.

Thanks,
Mike

[Mani Sankar Durai]

Hi Mike, 

We have analyzed your query and we have achieved your requirement by giving Height as “100%” in ScrollSettings property of grid. To maintain the height responsive it is necessary to give Height as “100%” in ScrollSettings of grid. 

Please refer the below code example. 

[Index.cshtml] 

@(Html.EJ().Grid<object>("Grid") 

                 ...               

                .MinWidth(400) 

               .IsResponsive(true) 

               .AllowScrolling(true) 

              .ScrollSettings(scroll => scroll.Height("100%")) 

             .Columns(col => 

       { 

                 ... 

       }) 

  ) 

We have also prepared a sample that can be downloaded from the below link. 

Link: http://www.syncfusion.com/downloads/support/forum/127460/ze/EntityCodeFirst238206928 

Also please refer the documentation of about ScrollSettings property in grid. 

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

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai 

[Michael Lambert]

Thanks, it worked....though a little embarrassed about not thinking 100% in scrollsetting ;)

[Mani Sankar Durai]

Hi Mike, 

Thanks for your feedback. 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai