Introduction:
Here
I will explain how to drag and drop gridview rows 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 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
|
|||
8 comments :
nice work suresh...........
Suresh. I have been following ur articles when ever I have some time. This is really great work. :)
Nice...
hi sir need jqgrid example and source code.. with sql server through json..
can i get the row and cell value after swaping in code behind. say we have button on page. we swap the rows of gridview and on button click i want row no and data currently on that row
Hi, How can i get same functionality for ajax+jquery grid?
Hi Suresh,
I have one doubt in Gridview Drag and drop functionality.how can I add columns to gridview like shortcut keys in runtime its means if you right click on gridview will show one pop up with already allotted columns to user in gridview .How to implement these kind of things in asp.net gridview.
Hi Suresh,
It was a nice piece of code. I was thinking like Is it possible to drag and drop one row of a gridview to another gridview? And then that record must be removed from source gridview and get added to the target gridview.
Note: Only a member of this blog may post a comment.