How to size grid height to 100%

[Al]

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>

[Pavlina]

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

 

 

[Al]

Thanks Pavlina

[Al]

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>

[Pavlina]

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

 

 

[Al]

That sorted it out, thanks Pavlina.