Grid height 100%

[Taweesak Upala]

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.

[Vignesh Natarajan]

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%.  

 

Sample link: http://www.syncfusion.com/downloads/support/forum/140845/ze/SyncfusionASPNETApplication3215933182  

 

Place get back to us, if you need further assistance. 

 

Regards, 

Vignesh Natarajan 

 

[Taweesak Upala]

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.

[Vignesh Natarajan]

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. 

 

https://www.syncfusion.com/kb/3508/how-to-render-the-grid-within-the-specified-container-height-and-width 

 

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 

[Taweesak Upala]

Hi Vignesh, 

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

Regards,

Taweesak U.

[Vignesh Natarajan]

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 

[priya]

Hi,

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

[Manivannan Padmanaban]

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 

 

[priya]

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.

[Manivel Sellamuthu]

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. 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/scrolling/#responsive-with-parent-container 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Adriano Arroyo]

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. 

 

https://www.syncfusion.com/kb/3508/how-to-render-the-grid-within-the-specified-container-height-and-width 

 

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.

[Farveen Sulthana Thameeztheen Basha]

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:- 

https://www.syncfusion.com/downloads/support/forum/155770/ze/Sample_(5)-908611031.zip 

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