Introduction:
We
can make gridview control resizable by using Jquery. In this article I will
explain how to resize asp.net gridview using jQuery with example in c#, vb.net.
Using resizable() method of jquery we can make gridview resizable. For this
purpose, we will use jQuery & jQuery ui plugin to make gridview resizable in c#, vb.net.
Method to Resize Gridview
Controls using Jquery:
<script type="text/javascript">
$(function
() {
$("#resizediv").resizable();
})
</script>
Full Source Code: Sample Appication
Design Section: Design page and place script as given below in
sample application.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Resizable Asp.net Gridview in jQuery
with Example</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function
() {
$("#resizediv").resizable();
})
</script>
</head>
<body>
<form id="form1"
runat="server">
<div id="resizediv"
class="ui-widget-content"
style="width:300px; padding:0.3em">
<asp:GridView ID="gvDetails"
CellPadding="5"
runat="server"
Width="100%"
BorderStyle="Solid">
<HeaderStyle BackColor="#A00909"
Font-Bold="true"
ForeColor="White"
/>
</asp:GridView>
</div>
</form>
</body>
</html>
Asp.Net Code Behind File(using
C#)
Write
following code in code behind file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Data;
using System.Web.UI.WebControls;
public partial class
gridvalue : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridviewData();
}
}
protected
void BindGridviewData()
{
DataTable dt = new DataTable();
dt.Columns.Add("EmpId", typeof(Int32));
dt.Columns.Add("EmpName", typeof(string));
dt.Columns.Add("Designation", typeof(string));
dt.Rows.Add(1, "Anil Minhas", "HR");
dt.Rows.Add(2, "Ankush rana", "Designer");
dt.Rows.Add(3, "Aman Kamboj", "Designer");
dt.Rows.Add(4, "Vijay Saklani", "Developer");
dt.Rows.Add(6, "Ajay", "Developer");
dt.Rows.Add(7, "Mayank", "Designer");
dt.Rows.Add(8, "Mannu", "QA");
gvDetails.DataSource =
dt;
gvDetails.DataBind();
}
}
Asp.Net Code Behind File(using vb.Net)
Write
following code in code behind file:
Imports System.Data
Imports System.Web.UI.WebControls
Partial Public Class
gridvalue
Inherits
System.Web.UI.Page
Protected
Sub Page_Load(ByVal
sender As Object,
ByVal e As EventArgs)
If Not IsPostBack Then
BindGridviewData()
End If
End
Sub
Protected
Sub BindGridviewData()
Dim dt As DataTable
= New DataTable()
dt.Columns.Add("EmpId", Type.GetType(Int32))
dt.Columns.Add("EmpName", Type.GetType(Of String))
dt.Columns.Add("Designation", Type.GetType(Of String))
dt.Rows.Add(1, "Anil Minhas", "HR")
dt.Rows.Add(2, "Ankush rana", "Designer")
dt.Rows.Add(3, "Aman Kamboj", "Designer")
dt.Rows.Add(4, "Vijay Saklani", "Developer")
dt.Rows.Add(6, "Ajay", "Developer")
dt.Rows.Add(7, "Mayank", "Designer")
dt.Rows.Add(8, "Mannu", "QA")
gvDetails.DataSource =
dt
gvDetails.DataBind()
End
Sub
End Class
0 comments:
Post a Comment