Friday, October 23, 2009

Tips and Tricks

Jquery table sorter with Ajax update panel:
jQuery’s plugin Tablesorter to implement client side sorting in ASP.Net Gridview


  • download and include the jQuery and TableSorter js files as follows

  • Add the downloaded Js scripts script tag

  • Include downloaded script in the page [type=“text/javascript” src=“scripts/jquery-latest.js"]

  • Include downloaded script in the page [type=“text/javascript” src=“scripts/jquery.tablesorter.js”]

    Important:
    If you are using update panel, you need to consider using pageLoad function(javascript)


    function pageLoad(sender, args)
    {
    jQuery.fn.fixGridView = function()
    {
    if (jQuery(this).is('table') && this.find('thead').length == 0)
    {
    // No 'thead' section
    // add thead
    //this.prepend("<thead></thead>");
    // remove first row from tbody, add it to thead
    this.find('tbody tr:first').remove().appendTo(this.find('thead'));
    }
    return this;
    };

    $(document).ready(function()
    {
    $("#<%= gvGridID.ClientID %>").fixGridView().tablesorter({
    widthFixed: true,
    widgets: ['zebra'],
    headers: {
    //Set the the column no(Stats with 0) with appropriate flag
    //where you do not want the sorter functionality
    //in the below sampale it is set to 4th column
    4: { sorter: false }
    }
    })
    });
    }
    }


    The above code will set you to run the Jquery sorter method with in update panel, keep in mind the page load metjod of javascript is a must.

    Gridview:
    add this class in your grid view CssClass="tablesorter "


    In the above css class the style contains sorting image. Place the below code in your CSS file.
    table.tablesorter
    {
    border-style:none;
    border-color: #d0d0d0;
    font-size: 11px;
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 5px;
    width: 100%;
    text-align: left;
    float: left;
    }
    table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #FDF299;
    border-left: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
    border-bottom: 1px solid #FFF;
    border-top: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
    }
    table.tablesorter thead tr .header {
    background-image: url(bg.gif); /*(relative path)*/
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
    }

    that's all, you are ready to run the grid sorter :).