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
                               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







0 comments:

Post a Comment