Binding jQuery tableDnd plugin with a GridView control will allow users to drag and drop GridView rows to reorder the list. In other words, this plugin adds drag and drop functionality to a GridView control.
You may also like...
How to do basic CRUD operations using GridView?
Now let us assume we have an inventory of Books which when bind with a GridView, will display books in the order of Book id.
We wish to reorder the list shown above by their prices; that is the higher the price, higher in the list. Therefore, we can drag and drop individual rows up and down to set a new order.
How do we do it?
In our web page, we will add a GridView control and using Asp.Net DataTable, add few columns and rows to the GridView.
To make the rows to be able to drag and drop, we need to add the jQuery tableDnd.js reference to our web page.
<script src="js/jquery.tablednd.0.7.min.js"></script>
Before adding references to our web page, we need to first download tableDnd plugin and add Google jQuery API reference to the web page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
We will initialize the GridView control in $(document).ready() function to enable the functionality.
$(document).ready(function() {
$("#GridView").tableDnD();
});
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html> <head> <title>Drag and Drop GridView Row using jQuery Plugin</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="js/jquery.tablednd.0.7.min.js"></script> <style> .selRow { color:brown; } </style> </head> <body> <form id="form1" runat="server"> <div> <h3>Dragable GridView Rows</h3> <asp:GridView ID="GridView" CellPadding="5" CellSpacing="0" ForeColor="#333" runat="server"> <HeaderStyle BackColor="#989898" ForeColor="white" /> </asp:GridView> </div> </form> </body> <script> $(document).ready(function() { $("#GridView").tableDnD(); }); </script> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { System.Data.DataTable mytable = new System.Data.DataTable(); System.Data.DataRow row = null; protected void Page_Load(object sender, EventArgs e) { CreateGrid(); AddRowsToGrid(); // NOW BIND THE GRIDVIEW WITH THE DATATABLE. GridView.DataSource = mytable; GridView.DataBind(); } private void CreateGrid() { // CREATE A GRID FOR DISPLAYING A LIST OF BOOKS. System.Data.DataColumn tColumn = null; // TABLE COLUMNS. tColumn = new System.Data.DataColumn("Book ID", System.Type.GetType("System.String")); mytable.Columns.Add(tColumn); tColumn = new System.Data.DataColumn("Name of the Book", System.Type.GetType("System.String")); mytable.Columns.Add(tColumn); tColumn = new System.Data.DataColumn("Price ($)", System.Type.GetType("System.String")); mytable.Columns.Add(tColumn); } private void AddRowsToGrid() { // ADD ROWS TO THE DATATABLE. mytable.Rows.Add(1, "Computer Architecture", "125.60"); mytable.Rows.Add(2, "Advanced Composite Material", "50.00"); mytable.Rows.Add(3, "Asp.Net 4 Blue Book", "80.00"); mytable.Rows.Add(4, "Strategies Unplugged", "99.99"); mytable.Rows.Add(5, "Teaching Science", "51.50"); } }
Option Explicit On Partial Class _Default Inherits System.Web.UI.Page Dim mytable As New Data.DataTable() Dim row As Data.DataRow Protected Sub form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles form1.Load CreateGrid() AddRowsToGrid() ' NOW BIND THE GRIDVIEW WITH THE DATATABLE. GridView.DataSource = mytable GridView.DataBind() End Sub Private Sub CreateGrid() ' CREATE A GRID FOR DISPLAYING A LIST OF BOOKS. Dim tColumn As Data.DataColumn ' TABLE COLUMNS. tColumn = New Data.DataColumn("Book ID", System.Type.GetType("System.String")) mytable.Columns.Add(tColumn) tColumn = New Data.DataColumn("Name of the Book", System.Type.GetType("System.String")) mytable.Columns.Add(tColumn) tColumn = New Data.DataColumn("Price ($)", System.Type.GetType("System.String")) mytable.Columns.Add(tColumn) End Sub Private Sub AddRowsToGrid() ' ADD ROWS TO THE DATATABLE. mytable.Rows.Add(1, "Computer Architecture", "125.60") mytable.Rows.Add(2, "Advanced Composite Material", "50.00") mytable.Rows.Add(3, "Asp.Net 4 Blue Book", "80.00") mytable.Rows.Add(4, "Strategies Unplugged", "99.99") mytable.Rows.Add(5, "Teaching Science", "51.50") End Sub End Class
After you run the application on a browser and you will see the GridView showing a list of books. Using the mouse, you can now drag and drop a row to its new location.
This plugin comes with many properties, using which we can control the look and feel of the rows we drag and drop.
You can learn more about the properties here.
Property “onDragStart”
Call a function when the user starts dragging a row to reorder. Usually this property is used identify the row and execute another function either on the row itself or another control.
Before starting with the properties, add a “label” control just below the GridView control in the <body> section of your webpage.
// ADD THIS LABLE BELOW THE GRIDVIEW CONTROL. <label id="msg"></label> <script> $(document).ready(function() { $("#GridView").tableDnD({ onDragStart: function(table, row) { $('#msg').html("Dragging row " + row.id); } }); }); </script>
Property onDragClass
A CSS class can be defined using this property and is active as long as the row is being dragged. Once dropped, the property becomes inactive.
<script> $(document).ready(function() { $("#GridView").tableDnD({ onDragClass: "selRow" // selRow IS A CSS CLASS. }); }); </script>
Property onDrop
Once the row drops or released, this property becomes active and it allows us to call or execute another function. The function can be anything from identifying the new location or order of the dragged and dropped row.
In the below example we will highlight the entire row which is being dragged and later dropped.
<script> $(document).ready(function() { // ASSIGN ROW ID'S TO EACH GRIDVIEW ROW, INCLUDING THE HEADER. var i = 0; $("#<%= GridView.ClientID %>").find('tr').each(function() { $(this).attr('id', i++); }); $("#GridView").tableDnD({ onDrop: function(table, row) { // EXCLUDE THE HEADER FROM BEING TOUCHED AT ALL. $("#<%= GridView.ClientID %>").find('tr:not(:first)').each(function() { $(this).css("background", "#FFF"); $(this).css("color", "#000"); }); // HIGHLIGHT THE ROW. $('#' + row.id).css("background", "#A5D1DE"); $('#' + row.id).css("color", "#FFF"); } }); }); </script>
It is an interesting plugin to play with using the traditional tables or Asp.Net GridView controls. Nevertheless, how much will be it useful in real life scenario, depends totally on the requirement of our users. To maintain the new order for future references, do not forget to save data in a data base table.