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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid height 100%

Thread ID:

Created:

Updated:

Platform:

Replies:

140845 Nov 10,2018 05:28 PM UTC Nov 16,2018 06:49 AM UTC ASP.NET Web Forms 5
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 



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

or the page will be automatically redirected to 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

;