Resizable GridView Using jQuery

In this article I will explain how to make a resizable Grid View in ASP.NET using jQuery.

The following is my aspx code.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title>Resizable Gridview in ASP.NET using jQuery</title>  
  7.   
  8.     <script src="jquery-1.8.2.js" type="text/javascript"></script>  
  9.   
  10.     <link href="jquery-ui.css" rel="stylesheet" type="text/css" />  
  11.   
  12.     <script src="jquery-ui.js" type="text/javascript"></script>  
  13.   
  14.     <script type="text/javascript">  
  15.         $(function() {  
  16.             $("#gridDivResize").resizable();  
  17.         })  
  18.     </script>  
  19.   
  20. </head>  
  21. <body>  
  22.     <form id="form1" runat="server">  
  23.     <div id="gridDivResize" class="ui-widget-content" style="width: 550px; padding: 2px">  
  24.         <asp:GridView ID="GridView1" CellPadding="4" runat="server" Width="100%" ForeColor="#333333"  
  25.             GridLines="None">  
  26.             <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />  
  27.             <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />  
  28.             <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />  
  29.             <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />  
  30.             <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />  
  31.             <EditRowStyle BackColor="#999999" />  
  32.             <AlternatingRowStyle BackColor="White" ForeColor="#284775" />  
  33.         </asp:GridView>  
  34.     </div>  
  35.     </form>  
  36. </body>  
  37. </html>  
Here I am binding this grid view from one of my SQL Server data tables.

The following is my Data Table design.

table design view
Image 1

The data in my data table is: I am showing only CompanyName, Employee Name, Joining Date and Experience columns in GridView.

show data
Image 2

My aspx.cs code is:
  1. using System;  
  2. using System.Configuration;  
  3. using System.Data;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Security;  
  7. using System.Web.UI;  
  8. using System.Web.UI.HtmlControls;  
  9. using System.Web.UI.WebControls;  
  10. using System.Web.UI.WebControls.WebParts;  
  11. using System.Xml.Linq;  
  12. using System.Data.SqlClient;  
  13.   
  14. public partial class _Default : System.Web.UI.Page  
  15. {  
  16.     SqlDataAdapter da;  
  17.     DataSet ds = new DataSet();  
  18.   
  19.     protected void Page_Load(object sender, EventArgs e)  
  20.     {  
  21.         if (!IsPostBack)  
  22.         {  
  23.             BindGridviewData();  
  24.         }  
  25.     }  
  26.   
  27.     protected void BindGridviewData()  
  28.     {  
  29.         SqlConnection con = new SqlConnection();  
  30.         con.ConnectionString = @"Data Source=MyPC\SqlServer2k8;Integrated Security=true;Initial Catalog=Test";  
  31.         SqlCommand cmd = new SqlCommand("SELECT CompanyName,EmployeeName,JoiningDate,Experience FROM EMPLOYEE", con);  
  32.         da = new SqlDataAdapter(cmd);  
  33.         da.Fill(ds);  
  34.         con.Open();  
  35.         cmd.ExecuteNonQuery();  
  36.         con.Close();  
  37.   
  38.         if (!object.Equals(ds.Tables[0], null))  
  39.         {  
  40.             if (ds.Tables[0].Rows.Count > 0)  
  41.             {  
  42.                 GridView1.DataSource = ds;  
  43.                 GridView1.DataBind();  
  44.             }  
  45.             else  
  46.             {  
  47.                 GridView1.DataSource = null;  
  48.                 GridView1.DataBind();  
  49.             }  
  50.         }  
  51.     }  
  52. }  
Now run the application:

show record
Image 3

Now resize the Grid View.

expend the size of grid view
Image 4

show data record
Image 5