Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET AJAX > Grid > Dynamic Scaling of RadFilter Boxes

Answered Dynamic Scaling of RadFilter Boxes

Feed from this thread
  • Answer Steve MVP avatar

    Posted on Sep 22, 2011 (permalink)

    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');
            });
        }
    Attached files

Back to Top

Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET AJAX > Grid > Dynamic Scaling of RadFilter Boxes