Introduction:
Here
I will explain how to reorder asp.net gridview rows with drag and drop options using using jQuery
in asp.net with jQuery
tablednd plugin or jQuery reorder or drag and drop gridview rows in asp.net
using
C#, VB.NET
with jQuery
tablednd plugin.
Description:
In
previous articles I explained Take screenshot of webpage in asp.net, Show Gridview row details in tooltip, Show tooltip for gridview header
columns,
Asp.net Interview questions, Highlight Gridview records based on
search
and many articles relating to Gridview, SQL, jQuery,asp.net, C#,VB.NET. Now I will explain how
to reorder or drag and drop gridview rows using jQuery
in asp.net with jQuery
tablednd plugin.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Drag and Drop Gridview Rows in Asp.net</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.tablednd.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$("#gvDetails").tableDnD();
})
</script>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:GridView ID="gvDetails"
runat="server">
<HeaderStyle BackColor="#DC5807" Font-Bold="true" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
|
If
you observe above code in header section I added jquery plugin “jquery.tablednd.js” by using this
plugin we can implement drag and drop functionality to gridview by setting one
property. If you want this plugin you can get it from attached downloadable folder
or from here jQuery tablednd plugin
Now
in code behind add the following namespaces
C#
Code
using System;
using System.Data;
|
After that add below code in code behind
protected void
Page_Load(object sender, EventArgs e)
{
BindGridviewData();
}
/// <summary>
/// Dynamically create & bind data to gridview
/// </summary>
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
BindGridviewData()
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
|
Demo
 |
|
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
|
|||
3 comments :
Hi, How to add like this for grid header? Not rows just grid drag and drop reaorder position?
how to save grid view rows in database after drag and drop
Note: Only a member of this blog may post a comment.