Determine header height

[Software]

I am trying to dynamically resize the grid to fill an area on the screen when the user resizes the browser.
In order to determine the 'GridData' area, I need to know the height of the static header row ('GridHeader').
When I create the control, the height is always 20.
Once I resize the browser, the header height is 33. 
Why the difference and how can I get the 33 when the control is created?

Thanks,
Eric

[Iana Tsolova]

Hi Eric,

You could retrieve the grid header height intercepting the OnGridCreated client-side event. Inside its handler reference the GridHeader div and get its height with the following code for instance:

<script type="text/javascript">
function GridCreated(sender, eventArgs)
{
    var gridHeaderDiv = sender.GridHeaderDiv;
    var headerHeight = gridHeaderDiv.clientHeight;
    alert(headerHeight);
}
</script>

<telerik:RadGrid ID="RadGrid1" runat="server">
    ....
    <ClientSettings>
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        <ClientEvents OnGridCreated="GridCreated" />
    </ClientSettings>
</telerik:RadGrid>

Find more about grid resizing/scrolling here.

Best regards,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[wnl]

How to get footer size with paging of grid?

[Princy]

Hi,

You will get the Footer Height using the following code.

Aspx:

<telerik:RadGrid ID="RadGrid1" runat="server">
    ....
    <ClientSettings>
        <ClientEvents OnGridCreated="GridCreated" />
    </ClientSettings>
</telerik:RadGrid>

Javascript:

function GridCreated(sender, eventArgs)
{
    var gridfooterDiv = sender.GridFooterDiv;
    var footerHeight = gridfooterDiv.clientHeight;
    alert(footerHeight);
}

Thanks,
Princy.

[wnl]

This way to get footer height doesn't work (version 2010.1.519.35 ), I don't have a div element in footer.
Is it possible in my Telerik's version?
In source view the footer looks like:

<table class="rgMasterTable rgClipCells" id="ctl00_LstPH_rgLMG1_ctl00_Pager" style="width: 100%; text-overflow: ellipsis; empty-cells: show; table-layout: fixed; overflow: hidden;" border="0" cellSpacing="0">...

and screen with source: source_screen

What is wrong?

Thanks.

[Princy]

Hi,

Please make sure that you have set the following property in RadGrid ClientSettings .

ASPX:

<ClientSettings Scrolling-AllowScroll="true" Scrolling-UseStaticHeaders="true">
      <ClientEvents OnGridCreated="GridCreated" />
</ClientSettings>

Thanks,
Princy.

[wnl]

I have those settings (in codebehind).
What should I check next?

[Tsvetina]

Hello,

Can you please specify whether you want to get the size of the footer item in terms of column footer, or of the tfoot element of the grid table?
If it is the first, you could use jQuery and look for elements with class name ".rgFooter". If you want to access the pager height only, look for elements with class name ".rgPager". If you need to check the total height of both, you could search for the tfoot element.
If you need a specific code sample, explain which height you need exactly.

Kind regards,
Tsvetina
the Telerik team

[wnl]

I want to get a height of .rgPager . Could you prepare a small example?

[Tsvetina]

Hello,

In this case you just need the following script:

function GridCreated(sender, args)
{
    var height = $telerik.$(".rgPager").height();
}

If you get a client error on this line, ensure that you have jQuery loaded in your page:
http://www.telerik.com/help/aspnet-ajax/introduction-using-jquery.html

Regards,
Tsvetina
the Telerik team

[wnl]

Thanks, it helped me.