Is there a way to find the height of RadFilter?

10 posts, 1 answers
  1. bdrennen
    bdrennen avatar
    20 posts
    Member since:
    Dec 2009

    Posted 13 Apr Link to this post

    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.

  2. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 18 Apr Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. bdrennen
    bdrennen avatar
    20 posts
    Member since:
    Dec 2009

    Posted 18 Apr in reply to Vessy Link to this post

    Thank you! That works perfectly.

     

  4. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 19 Apr Link to this post

    Hi,

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

    Best,
    Vessy
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. bdrennen
    bdrennen avatar
    20 posts
    Member since:
    Dec 2009

    Posted 28 Apr in reply to Vessy Link to this post

    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!

  6. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 02 May Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. bdrennen
    bdrennen avatar
    20 posts
    Member since:
    Dec 2009

    Posted 02 May in reply to Vessy Link to this post

    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!

  8. Answer
    Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 05 May Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. bdrennen
    bdrennen avatar
    20 posts
    Member since:
    Dec 2009

    Posted 05 May in reply to Vessy Link to this post

    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>
  10. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 09 May Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top