Dynamic Scaling of RadFilter Boxes

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

    Posted 22 Sep 2011 Link to this post

    Requirements

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

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    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() {
            fixRadGridFilterBar();
        });
      
        //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