c# - Gridview with drag and drop. Get new order of data -
i'm going through sample using drag , drop of grid view can re-order data. i'm trying find out once user has re-ordered grid view how how can data in first column in order have changed to. i've tried adding bit of code button event gets original order , not of user changed to.
aspx page: -
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="head1" runat="server"> <title>untitled page</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script> <script 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); } }); $("[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> </head> <body> <form id="form1" runat="server"> <asp:gridview id="gvsource" runat="server" cssclass="drag_drop_grid gridsrc" autogeneratecolumns="false"> <columns> <asp:boundfield datafield="item" headertext="item"/> <asp:boundfield datafield="price" headertext="price"/> </columns> </asp:gridview> <asp:button id="button1" runat="server" text="button" onclick="button1_click" /> </form> </body> </html> aspx.cs page: -
using system; using system.collections.generic; using system.linq; using system.web; using system.web.ui; using system.web.ui.webcontrols; using system.data; public partial class _default : system.web.ui.page { protected void page_load(object sender, eventargs e) { if (!page.ispostback) { datatable dt = new datatable(); dt.columns.addrange(new datacolumn[2] { new datacolumn("item"), new datacolumn("price") }); dt.rows.add("shirt", 450); dt.rows.add("jeans", 3200); dt.rows.add("trousers", 1900); dt.rows.add("tie", 185); dt.rows.add("cap", 100); dt.rows.add("hat", 120); dt.rows.add("scarf", 290); dt.rows.add("belt", 150); gvsource.useaccessibleheader = true; gvsource.datasource = dt; gvsource.databind(); dt.rows.clear(); dt.rows.add(); } } protected void button1_click(object sender, eventargs e) { foreach (gridviewrow row in gvsource.rows) { response.write(row.cells[0].text.tostring()); } } }
you can use jquery 'tablednd' plugin along asp.net listview or repeater.
this:
asp.net
<asp:repeater> <itemtemplate> <tr id='<%# eval("itemid") %>'> <!-- assign unique key id of row. --> ... </tr> </itemtemplate> </asp:repeater> jquery
$(document).ready(function () { $("#tbl").tablednd({ ondrop: function (table, row) { var rowids = ''; $('#tbl tr').each(function () { rowids += $(this).attr('id') + ","; }); $('#<%= hdnids.clientid %>').val(rowids); // save resulting sequence in hidden field. $('#<%= btnsaveorder.clientid %>').click(); // postback page , process new sequence on server side. }, ondragclass: "mydragclass", }); });
Comments
Post a Comment