Drag and Drop Gridview Row to Another GridView Row or DetailsView Using JQuery in Asp.Net C#

Drag and Drop Gridview Row to Another GridView Row or DetailsView

One Gridview row Move To Another GridView row Display as well as Detailsview Using JQuery Asp.Net C#.

                Download Coding


                  HTML CODING

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server"> 
<style type="text/css"> 
border: 3px solid #ffba00;
.row td
    <title>Drag & Drop GridView To Another GridView Using Jquery</title>
    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var droppedItemIndex = -1;
                helper: "clone",
                cursor: "move"
            $('#<%=GridView2.ClientID %>').droppable({
                drop: function (ev, ui) {
                    accept: '.block',
                     droppedItemIndex = $(ui.draggable).index();
                    var droppedItem = $(".gridSrc tr").eq(droppedItemIndex);
                    index = -1;
                    $("[id*=GridView2] .name").html(droppedItem.find(".name").html());
                    $("[id*=GridView2] .designation").html(droppedItem.find(".designation").html());

    <form id="form1" runat="server">
    <table >
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            onrowcreated="GridView1_RowCreated" CssClass="gridSrc" >
            <SelectedRowStyle CssClass="block row" />
            <RowStyle CssClass="block" />
            <HeaderStyle CssClass="grd1-header" />
            <asp:BoundField DataField="name" HeaderText="Name" ItemStyle-CssClass="name" >
<ItemStyle CssClass="name"></ItemStyle>
             <asp:BoundField DataField="designation" HeaderText="Designation" ItemStyle-CssClass="designation" >
<ItemStyle CssClass="designation"></ItemStyle>
    <td >
        <asp:GridView ID="GridView2"  Height="50px" Width="125px"  runat="server" AutoGenerateColumns="False" >
                <asp:TemplateField HeaderText="Name" ItemStyle-CssClass="name">
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("name") %>'></asp:Label>

<ItemStyle CssClass="name"></ItemStyle>

                <asp:TemplateField HeaderText="Designation">
                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("designation") %>'></asp:Label>
                    <ItemStyle CssClass="designation"></itemstyle>



                    C# CODING

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());
        SqlCommand cmd = new SqlCommand("select * from reg", con);
        SqlDataAdapter dAdapter = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        if (ds.Tables[0].Rows.Count > 0)
            GridView1.DataSource = ds.Tables[0];
        DataTable dt = new DataTable();
        dt = ds.Tables[0];
        GridView2.DataSource = dt;
    protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
        if (e.Row.RowType == DataControlRowType.DataRow)
            e.Row.Attributes.Add("onmouseover", "this.className='row'");
            e.Row.Attributes.Add("onmouseout", "this.className='block'");


First - Create New Form - Add Two GridView - Bind Data - add Edit Column - TemplateField

Add - Label For bind Field Name

JQquery  Plugins Add To  Script 

Add Item CssClass For Second GridView Item

Next - Bind Database Data To Gridview onPage Loading


Post a Comment