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
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Grid to resize to the screen/window size

Grid to resize to the screen/window size

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

5 Replies
MS Mani Sankar Durai Syncfusion Team November 17, 2016 11:35 AM UTC

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. 



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





Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


ML Michael Lambert November 17, 2016 06:00 PM UTC

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

MS Mani Sankar Durai Syncfusion Team November 18, 2016 11:12 AM UTC

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. 

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

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai 


ML Michael Lambert November 18, 2016 04:15 PM UTC

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

MS Mani Sankar Durai Syncfusion Team November 21, 2016 11:45 AM UTC

Hi Mike, 

Thanks for your feedback. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai 


Loader.
Up arrow icon