Drag and Drop GridView Rows using jQuery tableDnD Plugin C# and Vb.Net

← PrevNext →

The purpose of a GridView control is to display data in a tabular format. This allows users to view a huge list of data, also manipulated the data according to their requirement. Sometime users may wish to reorder the list of data displayed in the GridView. In this article I am going to show you how to Drag and drop GridView rows using jQuery to readjust the row location.

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.

gridview row show a list of data

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();
});
The Markup
<%@ 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>
Code behind (C#)
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");
    }
}
Vb.Net
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.

Other Properties

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>
Image showing jQuery onDragStart and onDragClass

gridview row with jquery onDragStart

jQuery onDragStart and onDrop

gridview row with jquery onDrop

Conclusion

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.

← PreviousNext →