Resizable asp.net Gridview columns using Jquery

• Download Gridview_Resize.zip - 167.8 KB

Introduction

This article explains how to use jQuery's plug-in colResizable to implement client-side column resizing in an ASP.NET GridView.  

Using the code 

In addition to colResizable, i also use Jquery cookie plugin to store columns width in a cookie, so that asp.net postback won't reset column width. Now, download and include the jQuery, cookie and colResizable JavaScript files as follows:  

<script type="text/javascript" src="scripts/jquery-latest.js"/>
<script src="/Scripts/colResizable-1.3.min.js" type="text/javascript"/>
<script src="/Scripts/jquery.cookie.js" type="text/javascript"/>  

Initialize the table width from cookie and colResizable plugin when the document is ready, using the code below:   

$(document).ready(function() 
{ 
    if ($.cookie('colWidth') != null) {
        var columns = $.cookie('colWidth').split(',');
        var i = 0;
        $('.GridViewStyle th').each(function () {
            $(this).width(columns[i++]);
        });
    }
 
    $(".GridViewStyle").colResizable({
        liveDrag: true,
        gripInnerHtml: "<div class='grip'></div>",
        draggingClass: "dragging",
        onResize: onSampleResized
    }); }); 

A callback function onSampleResized will be fired when the user has ended dragging a column anchor altering the previous table layout. It will read columns width and store them in a cookie. 

var onSampleResized = function (e) {
    var columns = $(e.currentTarget).find("th");
    var msg = "";
    columns.each(function () { msg += $(this).width() + ","; })
    $.cookie("colWidth", msg);
};  

Here is an asp.net Gridview.  

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" GridLines="None" CssClass="GridViewStyle">
<Columns>
......
...... 
<Columns>
</asp:GridView> 

The final output can be seen here. 

Summary 

This article showed how to Resize asp.net gridview using Jquery.