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

Asp.net Gridview Reorder Rows with Drag Drop Options using jQuery Tablednd Plugin

Mar 23, 2015
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.

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

Asp.net Gridview Reorder Rows with Drag Drop Options using jQuery Tablednd Plugin

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

3 comments :

AkdokurM said...

Hi, How to add like this for grid header? Not rows just grid drag and drop reaorder position?

Unknown said...
This comment has been removed by the author.
Unknown said...

how to save grid view rows in database after drag and drop

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.