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

Last Reply 6 months ago By jerryhien

Posted 6 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 6 months ago
Hi @jerryhien,
Please try the following

Duplicate Row validation in Drag and drop GridView rows using jQuery in ASP.Net

It might help you.

Cheers Andrea.

Posted 6 months ago
Andrea says:
Hi @jerryhien,
Please try the following

Duplicate Row validation in Drag and drop GridView rows using jQuery in ASP.Net

It might help you.

Cheers Andrea.

 Thanks you very much for your help!

Thanks is very good solution for check the Duplicate Row.

I hope to get the Drop out Dest Grid Row Data by ajax post like the ajax post the append new row to Dest Grid.

I would like to get the remain rows data in Dest Grid after the Drag & Drop done.


Posted 6 months ago Modified on 6 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

 


Posted 6 months ago

That is exactly my expected solution!

Thanks you very much for your help to make the code AnandM!

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