Dynamic Scaling of RadFilter Boxes

Thread is closed for posting
1 posts, 1 answers
  1. Answer
    Steve avatar
    1887 posts
    Member since:
    Dec 2008

    Posted 22 Sep 2011 Link to this post


    RadControls version All
    .NET version 4.0
    Visual Studio version 2010
    programming language C#\jQuery
    browser support

    all browsers supported by RadControls

    The rad filter areas contains two inputs, so when the grid is scaled to fit the entire browser, it's often hard to use css alone to align those as some css properties aren't supported around the IE7 range.  This script will wrap the filters in a table element to do the scaling for us.

    //Runs on page load when the DOM is ready
        $telerik.$(document).ready(function() {
        //Wraps the default grid filters in tables to assist in scaling
        function fixRadGridFilterBar() {
            $telerik.$('.rgFilterRow > td').each(function () {
                $telerik.$(this).wrapInner('<table class="rgFilterWrapper" width="100%"><tr class="rgFilterItems"></tr></table>');
            //Wrap the immediate child elements as column
            $('.rgFilterItems').children().wrap("<td class='filter-input' style='border:none'></td>");
            //Resize the elements
            $('.rgFilterItems .filter-input').each(function () {
                $(this).find('[id$="_wrapper"]').css('width', '100%').find('.riTextBox').css('width', '100%');
                $(this).find('.rgFilterBox').css('width', '100%');
                $(this).find('.rgFilter').parent().css('width', '22px');
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.