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

Move Grid View Records using jQuery

Article:
Viewed:  877 
Posted On:  4/20/2015 8:06:13 PM 
How we an drag n drop Grid View records from one position to another at run time in asp.net 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 asp.net c# using jQuery.

Below is my aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MoveableRecords.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Make Grid View Records Moveable in ASP.NET using jQuery</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 () {
            $("#gvEmployee").tableDnD();
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table style="border: solid 15px blue; width: 100%; vertical-align: central;">
            <tr>
                <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>
            </tr>
            <tr>
                <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" />
                    </asp:GridView>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
 

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)
                BindGrid();
        }
 
        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);
            da.Fill(dt);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
 
            if (!object.Equals(dt, null))
            {
                if (dt.Rows.Count > 0)
                {
                    gvEmployee.DataSource = dt;
                    gvEmployee.DataBind();
                }
                else
                {
                    gvEmployee.DataSource = null;
                    gvEmployee.DataBind();
                }
            }
        }
    }
}

Now Run your application:

1.png

Image 1.

Now Select any records and do drag and drop.

2.png

Image 2.

3.png

Image 3.

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