Introduction:
Here I will explain how to resize asp.net gridview using jQuery with example in c#, vb.net or resizable gridview using jQuery with example. To implement resizable gridview using jQuery we need to use jQuery & jQuery ui plugin because we need to set resizable() property for gridview to make it resizable in c#, vb.net.
Here I will explain how to resize asp.net gridview using jQuery with example in c#, vb.net or resizable gridview using jQuery with example. To implement resizable gridview using jQuery we need to use jQuery & jQuery ui plugin because we need to set resizable() property for gridview to make it resizable in c#, vb.net.
Description:
In previous articles I explained Get asp.net gridview selected row values on button click, Create
table dynamically in asp.net and bind to gridview, export
gridview data to excel in asp.net, Group
Gridview columns with header row in asp.net and many articles relating
to asp.net, c#, vb.net and jQuery.
Now I will explain how to resize asp.net gridview using
jQuery
with example in c#, vb.net.
To implement this first create one new web application and open
your Default.aspx and write the following code
<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="#df5015" Font-Bold="true" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
|
Now in code behind file write the code like as shown below
C# Code
using System;
using System.Data;
public partial class _Default :
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("UserId", typeof(Int32));
dt.Columns.Add("UserName",
typeof(string));
dt.Columns.Add("Education",
typeof(string));
dt.Rows.Add(1, "Suresh Dasari",
"B.Tech");
dt.Rows.Add(2, "Rohini Dasari",
"Msc");
dt.Rows.Add(3, "Madhav Sai",
"MS");
dt.Rows.Add(4, "Praveen",
"B.Tech");
dt.Rows.Add(6, "Sateesh",
"MD");
dt.Rows.Add(7, "Mahesh Dasari",
"B.Tech");
dt.Rows.Add(8, "Mahendra",
"CA");
gvDetails.DataSource = dt;
gvDetails.DataBind();
}
}
|
VB.NET Code
Imports System.Data
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub
Page_Load(ByVal sender As Object, ByVal e As
EventArgs) Handles Me.Load
If Not
IsPostBack Then
BindGridviewData()
End If
End Sub
Protected Sub
BindGridviewData()
Dim dt As
New DataTable()
dt.Columns.Add("UserId", GetType(Int32))
dt.Columns.Add("UserName",
GetType(String))
dt.Columns.Add("Education",
GetType(String))
dt.Rows.Add(1, "Suresh Dasari",
"B.Tech")
dt.Rows.Add(2, "Rohini Dasari",
"Msc")
dt.Rows.Add(3, "Madhav Sai",
"MS")
dt.Rows.Add(4, "Praveen",
"B.Tech")
dt.Rows.Add(6, "Sateesh",
"MD")
dt.Rows.Add(7, "Mahesh Dasari",
"B.Tech")
dt.Rows.Add(8, "Mahendra",
"CA")
gvDetails.DataSource = dt
gvDetails.DataBind()
End Sub
End Class
|
Now run above code and check the output that will be like as shown
below
Output
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
1 comments :
Nice Article
Note: Only a member of this blog may post a comment.