Email: Password:       Forgot Password 
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.

Move Grid View Records using jQuery

Viewed:  1826 
Posted On:  20/04/2015 20:06:13 
How we an drag n drop Grid View records from one position to another at run time in c# using jQuery 

In this article I am going to show how we can move our Grid View rows by drag n drop at run time in c# using jQuery.

Below is my aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MoveableRecords.Default" %>
<!DOCTYPE html>
<html xmlns="">
<head runat="server">
    <title>Make Grid View Records Moveable in ASP.NET using jQuery</title>
    <script type="text/javascript" src=""></script>
    <script src="jquery.tablednd.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
    <form id="form1" runat="server">
        <table style="border: solid 15px blue; width: 100%; vertical-align: central;">
                <td style="padding-left: 50px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue; font-size: 20pt; color: orangered;">
                           Move Records in ASP.NET Grid View         
                <td style="text-align: left; padding-left: 50px; border: solid 1px red;">
                    <asp:GridView ID="gvEmployee" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" CellSpacing="4">
                        <AlternatingRowStyle BackColor="White" />
                        <EditRowStyle BackColor="#2461BF" />
                        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="#507CD1" Font-Bold="true" ForeColor="White" />
                        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                        <RowStyle BackColor="#EFF3FB" Font-Names="Verdana" />
                        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                        <SortedAscendingCellStyle BackColor="#F5F7FB" />
                        <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                        <SortedDescendingCellStyle BackColor="#E9EBEF" />
                        <SortedDescendingHeaderStyle BackColor="#4870BE" />

My aspx.cs code is :

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
namespace MoveableRecords
    public partial class Default : System.Web.UI.Page
        SqlDataAdapter da;
        DataTable dt = new DataTable();
        protected void Page_Load(object sender, EventArgs e)
            if (!Page.IsPostBack)
        private void BindGrid()
            SqlConnection con = new SqlConnection();
            con.ConnectionString = @"Server=INDIA\MSSQLServer2k8;database=EmployeeManagement;UID=sa; pwd=india;";
            SqlCommand cmd = new SqlCommand("SELECT * FROM EMPLOYEE", con);
            da = new SqlDataAdapter(cmd);
            if (!object.Equals(dt, null))
                if (dt.Rows.Count > 0)
                    gvEmployee.DataSource = dt;
                    gvEmployee.DataSource = null;

Now Run your application:


Image 1.

Now Select any records and do drag and drop.


Image 2.


Image 3.

         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us