Is there a way to find the height of RadFilter?

[bdrennen]

Is there a way to find the height of the RadFilter and its expressions through JavaScript? I have a RadFilter on top of a RadGrid. I'm setting the height of the grid to the window height, which works quite well except I can't figure out how to pick up the height of the filter and expressions.

[Vessy]

Hi Bryan,

RadFilter does not have a built-in API for getting its height, but you can get directly the client height of its element via JavaScript in a similar way:

$find("RadFilter1").get_element().clientHeight;

Regards,
Vessy
Telerik by Progress

[bdrennen]

Thank you! That works perfectly.

 

[Vessy]

Hi,

You are welcome, Bryan - I am glad I  managed to help.

Best,
Vessy
Telerik by Progress

[bdrennen]

I'm afraid I have a followup question about this. Finding the height of the filter works perfectly, except when the filter is on a RadPane. In this instance, I have RadSplitter1 that contains two panes: HeaderPane and BodyPane. The filter is inside BodyPane. How do I get a reference to RadFilter1 when it's inside BodyPane?

Thank you!

[Vessy]

Hi Bryan,

If the Filter is placed directly inside the body pane, you can get access to in the same way, using $find("the_filter_id").

In case you are loading the content of the body pane from an external page through its ContentUrl property, you can get see how to get reference to its content page and the controls in it here:
http://www.telerik.com/support/kb/aspnet-ajax/splitter/details/referencing-content-page-in-a-splitter-pane-from-the-parent-page-and-vice-versa

Regards,
Vessy
Telerik by Progress

[bdrennen]

I've been trying to use $find("RadFilter1"), but it returns the error "Unable to get property 'get_element' of undefined or null reference." My pane content is part of the page, so it shouldn't have any problems finding it.

Here's my JavaScript function:

function setGridHeight() {
    var headerHeight = $('.header').outerHeight(),
        windowHeight = $(window).height(),
        gridObj = $find('<%= RadGrid1.ClientID%>'),
        filterHeight = $find("RadFilter1").get_element().clientHeight,
        gridHeight = windowHeight - (headerHeight + filterHeight + 3);

    $('#' + gridObj.get_id()).height(gridHeight);
    gridObj.repaint();
}

 

Here's how I've defined my splitter and panes, with filter and grid:

<telerik:RadSplitter ID="RadSplitter1" runat="server"
    Orientation="Vertical"
    Height="100%"
    Width="100%"
    LiveResize="true"
>
    <telerik:RadPane ID="SideBar" runat="server" Scrolling="None" Width="250">
    </telerik:RadPane>

    <telerik:RadPane ID="Main" runat="server" Scrolling="Both">
        <telerik:RadFilter ID="RadFilter1" runat="server"
            FilterContainerID="RadGrid1"
            ShowApplyButton="false"
        >
        </telerik:RadFilter>

        <telerik:RadGrid ID="RadGrid1" runat="server"
            AllowPaging="true"
            AllowSorting="true"
            AllowFilteringByColumn="true"
            PageSize="20"
            AutoGenerateColumns="true"

            OnItemCommand="RadGrid1_ItemCommand"
            OnNeedDataSource="RadGrid1_NeedDataSource"
            OnItemDataBound="RadGrid1_ItemDataBound"
            OnPreRender="RadGrid1_PreRender"

            Skin="Windows7"
        >
        </telerik:RadGrid>
    </telerik:RadPane>
</telerik:RadSplitter>

 

Any idea how come my script can't find the RadFilter1?

Thank you!

[Vessy]

Hi Bryan,

Is the Splitte placed inside a masted page, or other naming container? If so, you should access it through its clinet ID, in the same way the you are getting the reference to the Grid:

$find'<%= RadFilter1.ClientID%>')

Regards,
Vessy
Telerik by Progress

[bdrennen]

Ha! Yes, that's it. I'd swear that was the first thing I tried, but apparently I didn't.

Thank you, once again for your help. Here's the working version, in case anyone ever needs it:

<script type="text/javascript">
    var $ = $telerik.$; // make jQuery available through $ alias

    function pageLoad() {
        setGridHeight(); // set grid's height on page load
    }

    $(window).resize(function() {
        setGridHeight(); // maintain grid's height on window resize
    });

    function setGridHeight() {
        var headerHeight = $('.header').outerHeight(),
            windowHeight = $(window).height(),
            gridObj = $find('<%= RadGrid1.ClientID%>'),
            filterHeight = $find("<%= RadFilter1.ClientID %>").get_element().clientHeight,
            gridHeight = windowHeight - (headerHeight + filterHeight + 34); // 34 is how much space is required for elements around the grid

        $('#' + gridObj.get_id()).height(gridHeight); // set grid's height
        gridObj.repaint(); // apply new height
    }
</script>

[Vessy]

Hi,

You are welcome, Bryan - I am really glad we managed to pinpoint the root of the problem. Thank you fro sharing your final solution with our community.


Regards,
Vessy
Telerik by Progress