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

08:02:00  , , , ,  4 comments

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
                               Download

                        DEMO

                  HTML CODING
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server"> 
<style type="text/css"> 
.row
{  
background-color:hotpink;
border: 3px solid #ffba00;
color:Black;
}
.row td
{
cursor:move;
font-weight:bold;
}
</style>
    <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;
            $('.block').draggable({
                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());

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

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

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

      
    </td>
    </tr>
</table>  
    </div>
    </form>
</body>

</html>

                    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());
        con.Open();
        SqlCommand cmd = new SqlCommand("select * from reg", con);
        SqlDataAdapter dAdapter = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        dAdapter.Fill(ds);
        if (ds.Tables[0].Rows.Count > 0)
        {
            GridView1.DataSource = ds.Tables[0];
            GridView1.DataBind();
        }
        DataTable dt = new DataTable();
        ds.Tables[0].Clear();
        dt = ds.Tables[0];
        dt.Rows.Add();
        GridView2.DataSource = dt;
        GridView2.DataBind();
    }   
    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







4 comments:

  1. jana17 May 2018 at 11:01

    This is almost what I need, but I don't want the items in GridView2 to be replaced but to remain when another item from GridView1 is dropped in. How can this be changed to do that?

    ReplyDelete
  2. jana12 June 2018 at 13:54

    How would you modify this code so that when a row is copied from Gridview1 to Gridview2, it does not replace the contents of Gridview2 but add an additional row?

    ReplyDelete
  3. jana13 June 2018 at 13:37

    How can this code be changed to not replace the contents of Gridview2, but just add a new row?

    ReplyDelete
  4. jana14 June 2018 at 07:10

    Why am I unable to see comments? It says there are 3 comments but doesn't show them...

    ReplyDelete