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

Grid height 100%

Hi Syncfusion, 

How can I set the height of grid to expand 100% even if it's only one row bound to it. I tried set height to 100%, nothing changed (also tried ScrollSetting height to 100%).



Regards,
Taweesak U.

11 Replies

VN Vignesh Natarajan Syncfusion Team November 12, 2018 05:22 AM

Hi Taweesak, 
 
Thanks for contacting Syncfusion support. We are happy to assist you. 
 
Query: “I tried set height to 100%, nothing changed (also tried ScrollSetting height to 100%). 
 
From your query, we understand that you need to render the Grid with full size even though it has less number of records. Grid will e rendered as requested by you, if you have defined the ScrollSettings height as 100%. But you have mentioned that it is not working. So we suspect that you have enabled isResponsive and minWidth property. This is cause of the reported issue.  
 
When responsive is enabled Grid height will be adjusted based on content height. So we suggest you remove responsiveness and try again below solution. 
 
Refer the below code example for your reference 
 
  <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowScrolling="true"   > 
          <ScrollSettings Height="100%" Width="100%" ></ScrollSettings> 
        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> 
        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
            <Columns> 
               ……………… 
            </Columns> 
    </ej:Grid> 
 
 
For your convenience we have prepared a sample with scrollSettings height as 100%.  
 
 
Place get back to us, if you need further assistance. 
 
Regards, 
Vignesh Natarajan 
 



TU Taweesak Upala November 12, 2018 11:40 AM

Hi Vignesh, 

From your sample, I try to put grid inside a div as below. But, gap under the grid still remain.

<div style="border: solid 1px; height: 500px;">
    <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowScrolling="true">
        <ScrollSettings Height="100%" Width="100%"></ScrollSettings>
        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
        <Columns>
            <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="90" />
            <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" />
            <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75" />
            <ej:Column Field="Freight" HeaderText="FirstName" TextAlign="Right" Width="75" />
            <ej:Column Field="ShipCity" HeaderText="LastName" TextAlign="Right" Width="80" />
        </Columns>
    </ej:Grid>
</div>



Regards, 
Taweesak U.


VN Vignesh Natarajan Syncfusion Team November 13, 2018 04:28 AM

Hi Taweesak, 
 
 
Sorry for the inconvenience caused. 
 
 
According to your query we suspect that you need to render the grid within a container with specified width and height. We already have a knowledge base documentation for this query. Please refer the below link for the KB. 
 
 
In the above knowledge base document, we have explained to achieve that requirement using create event. We have obtained the width and height of the container and assigned them to the scrollSettings of the grid. In the create event of the grid we have subtracted the height of the grid header and pager from the container height. Similarly if you have toolbar enabled in grid then you need to subtract the height of the toolbar also from the container height. 
 
Please refer the below code example. 
 
 
<script type="text/javascript"> 
        function create(args) { 
            var gridObj = $("#OrdersGrid").ejGrid("instance"); 
            var scrollerwidth = $("#container").width();//Obtain the width of the container 
            var scrollerheight = ($("#container").height()) - ($(".e-gridheader").outerHeight()) - ($(".e-pager").outerHeight()) - ($(".e-gridtoolbar").outerHeight());//Obtain the height of the container and subtract it from gridheader and pager, toolbar 
            gridObj.option({ allowScrolling: true, scrollSettings: { width: scrollerwidth, height: scrollerheight } });//pass the obtainer width and height to gridmodel options 
        } 
    </script> 
 
 
Regards, 
Vignesh Natarajan 



TU Taweesak Upala November 15, 2018 01:16 PM

Hi Vignesh, 

By your sample, my problem was successfully solved. Thanks for your help.

Regards,
Taweesak U.


VN Vignesh Natarajan Syncfusion Team November 16, 2018 01:49 AM

Hi Taweesak, 

Thanks for the update.  

We are glad to hear that your query has been resolved by our solution.  

Please get back to us if you have further queries. 

Regards, 
Vignesh Natarajan 




PR priya June 17, 2020 12:26 PM

Hi,

I have similar issue in react app. tried setting height 100 % but nothing changed.


MP Manivannan Padmanaban Syncfusion Team June 18, 2020 12:02 AM

Hi Priya, 

Greetings from Syncfusion Support. 

Before we proceed with your query, we would like to confirm the following details. 
  1. Confirm whether are you using Essential JavaScript 1 Or Essential JavaScript 2.
  2. Share the complete Grid code example.

Provided details will help us, to resolve the reported issue as earlier as possible. 

Regards, 
Manivannan Padmanaban 
 



PR priya June 18, 2020 03:04 AM

Its essential javascript 2. the grid height is limited to last row, so there's available space seen below, I want the table to fit in the space showing horizontal scroller to the end of the page not just below the last row of table. just as shown in above examples.



MS Manivel Sellamuthu Syncfusion Team June 19, 2020 01:46 AM

Hi Priya, 

Thanks for your update. 

You can Specify the width and height as 100% to make the grid element fill its parent container. Setting the height to 100% requires the grid parent element to have explicit height. Please refer the below documentation link for more information. 


Please let us know, if you need further assistance. 

Regards, 
Manivel 



AA Adriano Arroyo replied to Vignesh Natarajan July 3, 2020 03:03 PM

Hi Taweesak, 
 
 
Sorry for the inconvenience caused. 
 
 
According to your query we suspect that you need to render the grid within a container with specified width and height. We already have a knowledge base documentation for this query. Please refer the below link for the KB. 
 
 
In the above knowledge base document, we have explained to achieve that requirement using create event. We have obtained the width and height of the container and assigned them to the scrollSettings of the grid. In the create event of the grid we have subtracted the height of the grid header and pager from the container height. Similarly if you have toolbar enabled in grid then you need to subtract the height of the toolbar also from the container height. 
 
Please refer the below code example. 
 
 
<script type="text/javascript"> 
        function create(args) { 
            var gridObj = $("#OrdersGrid").ejGrid("instance"); 
            var scrollerwidth = $("#container").width();//Obtain the width of the container 
            var scrollerheight = ($("#container").height()) - ($(".e-gridheader").outerHeight()) - ($(".e-pager").outerHeight()) - ($(".e-gridtoolbar").outerHeight());//Obtain the height of the container and subtract it from gridheader and pager, toolbar 
            gridObj.option({ allowScrolling: true, scrollSettings: { width: scrollerwidth, height: scrollerheight } });//pass the obtainer width and height to gridmodel options 
        } 
    </script> 
 
 
Regards, 
Vignesh Natarajan 



Hello, applying the code of this example, the grid adjusts correctly. but i have a problem, it throws me the following error when setting the scrollsettings values




this is my code. I need to adjust two grids on the same page, the first grid adjusts correctly, but the second does not because it falls into the error of the first image.



this is the grid



I have the latest version of essential studio asp web forms 18.1.0.52. It also happens to me with previous versions.



this is what it indicates in the ej.web.all.min.js


Thank you, I hope you can help me.



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 6, 2020 11:36 AM

Hi Adriano, 

Thanks for contacting Syncfusion Support. 

Query#:- Cannot read property find of Null. 
 
We have prepared sample as per your code example with Two Grids inside container but we are unable to reproduce the problem at our end. Refer to the sample Link:- 

We need some more additional details to find the cause of the issue. Share us the following details. 
 
  1. Complete complete Grid code example(How you have placed second Grid inside containter).
  2. Screenshot/Video Demo.
  3. If possible replicate the issue in the above sample and revert us back.
  4. Have you used same properties for both Grids. Is there any Frozen column enabled for the Second Grid?
 
Regards, 
Farveen sulthana T 


Loader.
Live Chat Icon For mobile
Up arrow icon