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

Last updated: 26th June 2024

The purpose of a GridView control is to display data in a tabular format. It allows users to view a huge list of data and whenever necessary they can manipulate the data. Sometime users may wish to reorder the list displayed in the GridView. In this article I am going to show you how to Drag and drop GridView rows using a jQuery plug-in.

See this demo

jQuery tableDnd Plug in

To make GridView rows draggable, we need to add a reference of jQuery tableDnd.js to our web page and bind the grid to the plug-in. After you have downloaded, copy the "js" folder in the root of your project.

<script src="js/jquery.tablednd.0.7.min.js"></script>

Markup and the Script

Add a GridView control in your web page. We'll add some data to the GridView using code behind procedure.

In the <head> section, I have added jQuery CDN and plug-in that I have downloaded.

In the <script> section, I have bind the GridView control with the plug-in. Its almost ready. All you need now is to populate the GridView with some data.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
    <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>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <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();     <!--bind grid to the plug-in-->
    });
</script>
</html>

Code behind (C#)

The code is optional. I am simply adding some hardcoded data to the GridView using the code behind procedure. You can add records to the grid dynamically using SqlDataSource control.

I am using DataTable to add data to the grid.

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 the grid.
        System.Data.DataColumn tColumn = null;      // TABLE COLUMNS. 
    
        tColumn = new System.Data.DataColumn("ID", System.Type.GetType("System.String"));
        mytable.Columns.Add(tColumn);
        tColumn = new System.Data.DataColumn("Bird Name", System.Type.GetType("System.String"));
        mytable.Columns.Add(tColumn);
        tColumn = new System.Data.DataColumn("TypeOfBird", System.Type.GetType("System.String"));
        mytable.Columns.Add(tColumn);
        tColumn = new System.Data.DataColumn("ScientificName", System.Type.GetType("System.String"));
        mytable.Columns.Add(tColumn);
    }

    private void AddRowsToGrid()
    {
        // ADD ROWS TO THE DATATABLE.

        mytable.Rows.Add(1, "Eurasian Collared-Dove", "Dove", "Streptopelia");
        mytable.Rows.Add(2, "Bell's Sparrow", "Sparrow", "Artemisiospiza Belli");
        mytable.Rows.Add(3, "Rock Pigeon", "Dove","Columba Livia");
        mytable.Rows.Add(4, "Brewer's Sparrow",	"Sparrow", "Spizella Breweri");
        mytable.Rows.Add(5, "Gilded Flicker", "Woodpecker",	"Colaptes Chrysoides");
    }
}

Visual basic Code

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("ID", System.Type.GetType("System.String"))
        mytable.Columns.Add(tColumn)
        tColumn = New Data.DataColumn("Bird Name", System.Type.GetType("System.String"))
        mytable.Columns.Add(tColumn)
        tColumn = New Data.DataColumn("TypeOfBird", System.Type.GetType("System.String"))
        mytable.Columns.Add(tColumn)
        tColumn = New Data.DataColumn("ScientificName", System.Type.GetType("System.String"))
        mytable.Columns.Add(tColumn)
    End Sub

    Private Sub AddRowsToGrid()
        ' ADD ROWS TO THE DATATABLE.

        mytable.Rows.Add(1, "Eurasian Collared-Dove", "Dove", "Streptopelia")
        mytable.Rows.Add(2, "Bell's Sparrow", "Sparrow", "Artemisiospiza Belli")
        mytable.Rows.Add(3, "Rock Pigeon", "Dove","Columba Livia")
        mytable.Rows.Add(4, "Brewer's Sparrow",	"Sparrow", "Spizella Breweri")
        mytable.Rows.Add(5, "Gilded Flicker", "Woodpecker",	"Colaptes Chrysoides")
    End Sub
End Class

Run the application and you will see a list of birds. Using the mouse, you can now drag and drop a row to its new location.

See this demo

More tableDnd properties that you can use

This plugin comes with many properties, using which we can control the look and feel of the rows you 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>

See this demo

Conclusion

It is an interesting plugin to play with using the traditional HTML 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. Dont't forget to save the new order (that you have changed) in the database.

← PreviousNext →