Drag Row between GridViews and save in Database using jQuery AJAX in ASP.Net

Last Reply 10 months ago By jerryhien

Posted 10 months ago

In the link:

http://www.aspforums.net/Threads/731739/Drag-Rows-from-one-GridView-to-another-and-save-in-Database-using-jQuery-AJAX-in-ASPNet/

We can save in DataBase the Append row Dest Grid, but what happen if I drop it out of the Dest Grid (the drop rows from Dest Grid return to Source Grid) , i would like to get the drop row data for delete it in DataBase.

Thanks you very much for your read!

Posted 10 months ago Modified on 10 months ago

Hi jerryhien,

I have created a sample which fullfill your requirement.

HTML

<div>
    <asp:GridView ID="gvSource" runat="server" CssClass="drag_drop_grid GridSrc" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="Price" HeaderText="Price" />
        </Columns>
    </asp:GridView>
    <hr />
    <asp:GridView ID="gvDest" runat="server" CssClass="drag_drop_grid GridDest" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="Price" HeaderText="Price" />
        </Columns>
    </asp:GridView>
</div>
<div>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
    <link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
    <script type="text/javascript">
        $(function () {
            $(".drag_drop_grid").sortable({
                items: 'tr:not(tr:first-child)',
                cursor: 'crosshair',
                connectWith: '.drag_drop_grid',
                axis: 'y',
                dropOnEmpty: true,
                receive: function (e, ui) {
                    $(this).find("tbody").append(ui.item);
                    var product = {};
                    if (ui.sender[0].id == "gvSource") {
                        product.Item = $("[id*=gvDest] tr:last").find("td:nth-child(1)").html();
                        product.Price = $("[id*=gvDest] tr:last").find("td:nth-child(2)").html();
                        product.selectedGrid = ui.sender[0].id;
                    }
                    else {
                        product.Item = $("[id*=gvSource] tr:last").find("td:nth-child(1)").html();
                        product.Price = $("[id*=gvSource] tr:last").find("td:nth-child(2)").html();
                        product.selectedGrid = ui.sender[0].id;
                    }
                    $.ajax({
                        type: "POST",
                        url: "Default.aspx/SaveProduct",
                        data: '{product: ' + JSON.stringify(product) + '}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            alert("Product Added and Deleted Successfully.");
                        }
                    });
                    return false;
                }
            });
            $("[id*=gvDest] tr:not(tr:first-child)").remove();
        });
    </script>
    <style type="text/css">
        .GridSrc td
        {
            background-color: #A1DCF2;
            color: black;
            font-size: 10pt;
            font-family: Arial;
            line-height: 200%;
            cursor: pointer;
            width: 100px;
        }
        .GridSrc th
        {
            background-color: #3AC0F2;
            color: White;
            font-family: Arial;
            font-size: 10pt;
            line-height: 200%;
            width: 100px;
        }
        .GridDest td
        {
            background-color: #eee !important;
            color: black;
            font-family: Arial;
            font-size: 10pt;
            line-height: 200%;
            cursor: pointer;
            width: 100px;
        }
        .GridDest th
        {
            background-color: #6C6C6C !important;
            color: White;
            font-family: Arial;
            font-size: 10pt;
            line-height: 200%;
            width: 100px;
        }
    </style>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        BindGrid();
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Name"), new DataColumn("Price") });
        dt.Rows.Add();
        gvDest.DataSource = dt;
        gvDest.DataBind();
    }
}

[WebMethod]
public static void SaveProduct(Product product)
{
    string query = string.Empty;
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        if (product.selectedGrid.ToUpper() == "gvSource".ToUpper())
        {
            query = "INSERT INTO Product VALUES(@Item, @Price);DELETE FROM Products WHERE Name= @Item AND Price = @Price";
        }
        else
        {
            query = "INSERT INTO Products VALUES(@Item, @Price);DELETE FROM Product WHERE Name= @Item AND Price = @Price";
        }
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@Item", product.Item);
            cmd.Parameters.AddWithValue("@Price", product.Price);
            cmd.Connection = con;
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
}

public class Product
{
    public string Item { get; set; }
    public string Price { get; set; }
    public string selectedGrid { get; set; }
}

public void BindGrid()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT Name,Price FROM Products"))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            sda.Fill(dt);
            gvSource.UseAccessibleHeader = true;
            gvSource.DataSource = dt;
            gvSource.DataBind();
            con.Close();
        }
    }
}

ScreenShot

 

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html