This is a migrated thread and some comments may be shown as answers.

How to size grid height to 100%

5 Answers 431 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Al
Top achievements
Rank 1
Iron
Iron
Iron
Al asked on 10 Dec 2014, 11:50 AM
Hi,

I have tried several combinations from other posts but I cannot see why my grid looks as in the screenshot?

‚Äč
<div style="height:400px; border:solid">
    <telerik:RadGrid ID="RadGrid1" Height="100%" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource1" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" GroupPanelPosition="Top" ShowGroupPanel="True" AllowMultiRowSelection="True">
        <ClientSettings AllowDragToGroup="True">
            <Selecting AllowRowSelect="True" />
            <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="100%" />
            <Resizing AllowColumnResize="True" AllowResizeToFit="True" />
        </ClientSettings>
        <MasterTableView >
           ...
        </MasterTableView>
    </telerik:RadGrid>
</div>

5 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 11 Dec 2014, 03:55 PM
Hi,

Setting 100% Height for the grid should be enough in order to resize the grid depending on the container size. However, if your scenario is different you can refer to the code library below which shows how to set 100% height to the grid in several specific scenarios:
http://www.telerik.com/support/code-library/setting-radgrid%27s-height-in-percents

Regards,
Pavlina
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Al
Top achievements
Rank 1
Iron
Iron
Iron
answered on 12 Dec 2014, 09:23 AM
Thanks Pavlina
0
Al
Top achievements
Rank 1
Iron
Iron
Iron
answered on 12 Dec 2014, 10:45 AM
Hi Pavlina,

After going through the links all is fine with the grid height BUT my problem is caused by something else - as soon as I put a RadAjaxManager on my page then the height setting no longer works.

I am using a master page with the code below, as soon as I put an ajax manager on the page and link to to a button then the grid height goes very small:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 
 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnUpdate">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="ALP1" UpdatePanelCssClass="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>       
        <telerik:RadAjaxLoadingPanel ID="ALP1" runat="server"></telerik:RadAjaxLoadingPanel>
 
  
    <div>
        <telerik:RadButton ID="btnUpdate" runat="server" Text="Update" ></telerik:RadButton>
    </div
 
         
    <div style="height:100%;">
            <telerik:RadGrid ID="RadGrid1" Height="100%" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
                <ClientSettings AllowDragToGroup="True">
                    <Selecting AllowRowSelect="True" />
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                    <Resizing AllowColumnResize="True" AllowResizeToFit="True" />
                </ClientSettings>
                <MasterTableView >
                    <RowIndicatorColumn Visible="False">
                    </RowIndicatorColumn>
                    <Columns>
                        <telerik:GridClientSelectColumn FilterControlAltText="Filter ClientSelectColumn column" UniqueName="ClientSelectColumn">
                        </telerik:GridClientSelectColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>       
    </div>     
     
</asp:Content>

But this code works fine:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 
         
    <div style="height:100%;">
            <telerik:RadGrid ID="RadGrid1" Height="100%" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
                <ClientSettings AllowDragToGroup="True">
                    <Selecting AllowRowSelect="True" />
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                    <Resizing AllowColumnResize="True" AllowResizeToFit="True" />
                </ClientSettings>
                <MasterTableView >
                    <RowIndicatorColumn Visible="False">
                    </RowIndicatorColumn>
                    <Columns>
                        <telerik:GridClientSelectColumn FilterControlAltText="Filter ClientSelectColumn column" UniqueName="ClientSelectColumn">
                        </telerik:GridClientSelectColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>       
    </div>     
     
</asp:Content>
0
Pavlina
Telerik team
answered on 13 Dec 2014, 08:48 AM
Hello,

Could you try setting UpdatePanelHeight property to 100% in the ajax settings and see if the problem still persists?
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
          <AjaxSettings>
              <telerik:AjaxSetting AjaxControlID="btnUpdate">
                  <UpdatedControls>
                      <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="ALP1" UpdatePanelHeight="100%" UpdatePanelCssClass="" />
                  </UpdatedControls>
              </telerik:AjaxSetting>
          </AjaxSettings>
      </telerik:RadAjaxManager>


Regards,
Pavlina
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Al
Top achievements
Rank 1
Iron
Iron
Iron
answered on 15 Dec 2014, 12:33 PM
That sorted it out, thanks Pavlina.
Tags
Grid
Asked by
Al
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Pavlina
Telerik team
Al
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or