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" %>
  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>
  8. <script src="jquery-1.8.2.js" type="text/javascript"></script>
  10. <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
  12. <script src="jquery-ui.js" type="text/javascript"></script>
  14. <script type="text/javascript">
  15. $(function() {
  16. $("#gridDivResize").resizable();
  17. })
  18. </script>
  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;
  14. public partial class _Default : System.Web.UI.Page
  15. {
  16. SqlDataAdapter da;
  17. DataSet ds = new DataSet();
  19. protected void Page_Load(object sender, EventArgs e)
  20. {
  21. if (!IsPostBack)
  22. {
  23. BindGridviewData();
  24. }
  25. }
  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();
  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