Resizable Gridview using JQuery
In this article I'm trying to explain how to Resize GridView control using JQuery in ASP.net. Using one simple line of code we can achieve this. This article will help you for freshers those who are new to JQuery.
Resizable Gridview using JQuery:
In this article I'm trying to explain how to Resize gridview control using JQuery in ASP.net.
Using one simple line of code we can achieve this. This article will help you for freshers those who are new to
JQuery.Source Code:
Use gridview id as a key field to find the control for Resizing.
<script>
$(function () {
$("#gv").resizable();
});
</script>
I just design my Source code like below.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Resize.aspx.cs" Inherits="Resize" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Resizable Demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<form runat="server">
<asp:GridView ID="gv" runat="server">
</asp:GridView>
</form>
<script>
$(function () {
$("#gv").resizable();
});
</script>
</body>
</html>Code Behind:
I just binded some records into my gridview to perform Resize action into that.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class Resize : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.Add("Item");
dt.Columns.Add("Cost");
DataRow dr = dt.NewRow();
dr[0] = "Laptop";
dr[1] = "35000";
DataRow dr1 = dt.NewRow();
dr1[0] = "Mobile";
dr1[1] = "15000";
DataRow dr2 = dt.NewRow();
dr2[0] = "Mens Ware";
dr2[1] = "3000";
dt.Rows.Add(dr);
dt.Rows.Add(dr1);
dt.Rows.Add(dr2);
if (!IsPostBack)
{
gv.DataSource = dt;
gv.DataBind();
}
}
}Conclusion:
This article will help you, for those who are beginners to perform Resize action into the Gridview control.
Hope you are enjoyed with this article. If you have any doubts or feedback out of my resource please post your responses.
I Just refer from "https://jqueryui.com/".
Follow