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

Is there a way to find the height of RadFilter?

9 Answers 33 Views
Filter
This is a migrated thread and some comments may be shown as answers.
bdrennen
Top achievements
Rank 1
bdrennen asked on 13 Apr 2017, 09:04 PM

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.

9 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 18 Apr 2017, 10:25 AM
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.
0
bdrennen
Top achievements
Rank 1
answered on 18 Apr 2017, 02:54 PM

Thank you! That works perfectly.

 

0
Vessy
Telerik team
answered on 19 Apr 2017, 08:22 AM
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.
0
bdrennen
Top achievements
Rank 1
answered on 28 Apr 2017, 04:59 PM

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!

0
Vessy
Telerik team
answered on 02 May 2017, 03:35 PM
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.
0
bdrennen
Top achievements
Rank 1
answered on 02 May 2017, 10:52 PM

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!

0
Accepted
Vessy
Telerik team
answered on 05 May 2017, 01:27 PM
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.
0
bdrennen
Top achievements
Rank 1
answered on 05 May 2017, 03:15 PM

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>
0
Vessy
Telerik team
answered on 09 May 2017, 10:36 AM
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.
Tags
Filter
Asked by
bdrennen
Top achievements
Rank 1
Answers by
Vessy
Telerik team
bdrennen
Top achievements
Rank 1
Share this question
or