Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Drag and Drop Gridview Rows in Asp.net using jQuery Tablednd Plugin

Apr 20, 2014
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.

To implement drag and drop feature in gridview we need to write the code like as shown below


<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


Download Sample Code Attached

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 RSS subscribe by email Subscribe by Email

8 comments :

Unknown said...

nice work suresh...........

Anonymous said...

Suresh. I have been following ur articles when ever I have some time. This is really great work. :)

swaroop said...

Nice...

gunageorge said...

hi sir need jqgrid example and source code.. with sql server through json..

Anonymous said...

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

Anonymous said...

Hi, How can i get same functionality for ajax+jquery grid?

Unknown said...

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.

Subin said...

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.

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.