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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid height 100%

Thread ID:

Created:

Updated:

Platform:

Replies:

155770 Nov 10,2018 05:28 PM UTC Jul 6,2020 03:36 PM UTC ASP.NET Core 11
loading
Tags: Grid
Taweesak Upala
Asked On November 10, 2018 05:28 PM UTC

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 [Syncfusion]
Replied On November 12, 2018 10:22 AM UTC

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 
 


Taweesak Upala
Replied On November 12, 2018 04:40 PM UTC

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 [Syncfusion]
Replied On November 13, 2018 09:28 AM UTC

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 


Taweesak Upala
Replied On November 15, 2018 06:16 PM UTC

Hi Vignesh, 

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

Regards,
Taweesak U.

Vignesh Natarajan [Syncfusion]
Replied On November 16, 2018 06:49 AM UTC

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
Replied On June 17, 2020 04:26 PM UTC

Hi,

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

Manivannan Padmanaban [Syncfusion]
Replied On June 18, 2020 04:02 AM UTC

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
Replied On June 18, 2020 07:04 AM UTC

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 [Syncfusion]
Replied On June 19, 2020 05:46 AM UTC

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 


Adriano Arroyo
Replied On July 3, 2020 07:03 PM UTC

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.


Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On July 6, 2020 03:36 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon