ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2017 www.aspforums.com. All rights reserved.Drag Row between GridViews and save in Database using jQuery AJAX in ASP.NetHi @jerryhien,<br />Please try the following<br /><br /><a href = 'link(Threads/146781/Duplicate-Row-validation-in-Drag-and-drop-GridView-rows-using-jQuery-in-ASPNet/)'>Duplicate Row validation in Drag and drop GridView rows using jQuery in ASP.Net</a><br /><br />It might help you.<br /><br />Cheers Andrea.http://www.aspforums.net/Threads/131555/Drag-Row-between-GridViews-and-save-in-Database-using-jQuery-AJAX-in-ASPNet/http://www.aspforums.net/Threads/131555/Drag-Row-between-GridViews-and-save-in-Database-using-jQuery-AJAX-in-ASPNet/Thu, 15 Dec 2016 00:48:36 GMTDrag Row between GridViews and save in Database using jQuery AJAX in ASP.Net<blockquote><cite>Andrea says:</cite> <pre>Hi @jerryhien,<br />Please try the following<br /><br /><a href="http://www.aspforums.net/Threads/146781/Duplicate-Row-validation-in-Drag-and-drop-GridView-rows-using-jQuery-in-ASPNet/">Duplicate Row validation in Drag and drop GridView rows using jQuery in ASP.Net</a><br /><br />It might help you.<br /><br />Cheers Andrea.</pre> </blockquote> <p>&nbsp;Thanks you very much for your help!</p> <p>Thanks is very good solution for check the Duplicate Row.</p> <p>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.</p> <p>I would like to get the remain rows data in Dest Grid after the Drag &amp; Drop done.</p>http://www.aspforums.net/Threads/131555/Drag-Row-between-GridViews-and-save-in-Database-using-jQuery-AJAX-in-ASPNet/http://www.aspforums.net/Threads/131555/Drag-Row-between-GridViews-and-save-in-Database-using-jQuery-AJAX-in-ASPNet/Thu, 15 Dec 2016 01:13:32 GMTDrag Row between GridViews and save in Database using jQuery AJAX in ASP.Net<p>Hi <a class="username" rel="jerryhien"> jerryhien</a>,</p> <p>I have created a sample which fullfill your requirement.</p> <p><span style="text-decoration: underline;">HTML</span></p> <pre class="brush: html">&lt;div&gt; &lt;asp:GridView ID=&#34;gvSource&#34; runat=&#34;server&#34; CssClass=&#34;drag_drop_grid GridSrc&#34; AutoGenerateColumns=&#34;false&#34;&gt; &lt;Columns&gt; &lt;asp:BoundField DataField=&#34;Name&#34; HeaderText=&#34;Name&#34; /&gt; &lt;asp:BoundField DataField=&#34;Price&#34; HeaderText=&#34;Price&#34; /&gt; &lt;/Columns&gt; &lt;/asp:GridView&gt; &lt;hr /&gt; &lt;asp:GridView ID=&#34;gvDest&#34; runat=&#34;server&#34; CssClass=&#34;drag_drop_grid GridDest&#34; AutoGenerateColumns=&#34;false&#34;&gt; &lt;Columns&gt; &lt;asp:BoundField DataField=&#34;Name&#34; HeaderText=&#34;Name&#34; /&gt; &lt;asp:BoundField DataField=&#34;Price&#34; HeaderText=&#34;Price&#34; /&gt; &lt;/Columns&gt; &lt;/asp:GridView&gt; &lt;/div&gt; &lt;div&gt; &lt;script src=&#34;http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;Stylesheet&#34; href=&#34;http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { $(&#34;.drag_drop_grid&#34;).sortable({ items: &#39;tr:not(tr:first-child)&#39;, cursor: &#39;crosshair&#39;, connectWith: &#39;.drag_drop_grid&#39;, axis: &#39;y&#39;, dropOnEmpty: true, receive: function (e, ui) { $(this).find(&#34;tbody&#34;).append(ui.item); var product = {}; if (ui.sender[0].id == &#34;gvSource&#34;) { product.Item = $(&#34;[id*=gvDest] tr:last&#34;).find(&#34;td:nth-child(1)&#34;).html(); product.Price = $(&#34;[id*=gvDest] tr:last&#34;).find(&#34;td:nth-child(2)&#34;).html(); product.selectedGrid = ui.sender[0].id; } else { product.Item = $(&#34;[id*=gvSource] tr:last&#34;).find(&#34;td:nth-child(1)&#34;).html(); product.Price = $(&#34;[id*=gvSource] tr:last&#34;).find(&#34;td:nth-child(2)&#34;).html(); product.selectedGrid = ui.sender[0].id; } $.ajax({ type: &#34;POST&#34;, url: &#34;Default.aspx/SaveProduct&#34;, data: &#39;{product: &#39; + JSON.stringify(product) + &#39;}&#39;, contentType: &#34;application/json; charset=utf-8&#34;, dataType: &#34;json&#34;, success: function (response) { alert(&#34;Product Added and Deleted Successfully.&#34;); } }); return false; } }); $(&#34;[id*=gvDest] tr:not(tr:first-child)&#34;).remove(); }); &lt;/script&gt; &lt;style type=&#34;text/css&#34;&gt; .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; } &lt;/style&gt; &lt;/div&gt;</pre> <p><span style="text-decoration: underline;">C#</span></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { BindGrid(); DataTable dt = new DataTable(); dt.Columns.AddRange(new DataColumn[2] { new DataColumn(&#34;Name&#34;), new DataColumn(&#34;Price&#34;) }); dt.Rows.Add(); gvDest.DataSource = dt; gvDest.DataBind(); } } [WebMethod] public static void SaveProduct(Product product) { string query = string.Empty; string constr = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; using (SqlConnection con = new SqlConnection(constr)) { if (product.selectedGrid.ToUpper() == &#34;gvSource&#34;.ToUpper()) { query = &#34;INSERT INTO Product VALUES(@Item, @Price);DELETE FROM Products WHERE Name= @Item AND Price = @Price&#34;; } else { query = &#34;INSERT INTO Products VALUES(@Item, @Price);DELETE FROM Product WHERE Name= @Item AND Price = @Price&#34;; } using (SqlCommand cmd = new SqlCommand(query)) { cmd.CommandType = CommandType.Text; cmd.Parameters.AddWithValue(&#34;@Item&#34;, product.Item); cmd.Parameters.AddWithValue(&#34;@Price&#34;, 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[&#34;constr&#34;].ConnectionString; using (SqlConnection con = new SqlConnection(constr)) { using (SqlCommand cmd = new SqlCommand(&#34;SELECT Name,Price FROM Products&#34;)) { 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(); } } }</pre> <p><span style="text-decoration: underline;">ScreenShot</span></p> <p><span style="text-decoration: underline;"><img src="http://i988.photobucket.com/albums/af3/mudassarkhan/131555.gif" alt="" width="426" height="324" /></span></p> <p>&nbsp;</p>http://www.aspforums.net/Threads/131555/Drag-Row-between-GridViews-and-save-in-Database-using-jQuery-AJAX-in-ASPNet/http://www.aspforums.net/Threads/131555/Drag-Row-between-GridViews-and-save-in-Database-using-jQuery-AJAX-in-ASPNet/Thu, 15 Dec 2016 03:06:30 GMTDrag Row between GridViews and save in Database using jQuery AJAX in ASP.Net<p>That is exactly my expected solution!</p> <p>Thanks you very much for your help to make the code AnandM!</p>http://www.aspforums.net/Threads/131555/Drag-Row-between-GridViews-and-save-in-Database-using-jQuery-AJAX-in-ASPNet/http://www.aspforums.net/Threads/131555/Drag-Row-between-GridViews-and-save-in-Database-using-jQuery-AJAX-in-ASPNet/Thu, 15 Dec 2016 08:41:31 GMT