This article explains how to use jQuery's plug-in colResizable to implement client-side column resizing in an ASP.NET GridView. 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. The sample code can be downloaded at CodeProject.
Subscribe
