0

Issue: Grid now drags rows up or down. I want to save the order change and I have searched but am unable to find a way

Idea: When I drag I assume I can get the ID in JavaScript/jQuery and save the change this way?

Code:

(.aspx)

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Grid.aspx.vb" Inherits="Grid" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- Drag and drop feature --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="jquery.tablednd.js"></script>
<script type="text/javascript">
    $(function () {
        $("#gvDetails").tableDnD();
    })
</script>

<!-- /// Drag and drop feature --> 
</head>
<body>
    <form id="form1" runat="server">
    <div>     
<hr />
<asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="true" EmptyDataText = "No files uploaded">
    <Columns>
   <asp:BoundField DataField="Text" HeaderText="File Name" />
    </Columns>
</asp:GridView>

    </div>
    </form> 
</body>
</html>

(.aspx.vb)

Imports System.IO
Imports System.Data
Imports System.Collections.Generic

Partial Class Grid
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

        If Not IsPostBack Then
            BindGridviewData()
        End If
    End Sub

    Protected Sub BindGridviewData()


        Dim filePaths() As String = Directory.GetFiles(Server.MapPath("~/Uploads/"))
        Dim files As List(Of ListItem) = New List(Of ListItem)
        For Each filePath As String In filePaths
            files.Add(New ListItem(Path.GetFileName(filePath), filePath))
        Next

        gvDetails.DataSource = files
        gvDetails.DataBind()

    End Sub

End Class

References:

Code based on: http://www.aspdotnet-suresh.com/2015/03/aspnet-gridview-reorder-rows-with-drag-drop-options-using-jquery-tablednd-plugin.html

Searched (example): http://forums.asp.net/t/2042661.aspx?Drag+and+drop+and+save+automatically+with+Datagrids

indofraiser
  • 1,014
  • 3
  • 18
  • 50

1 Answers1

1

You can catch the event onDrop while you are calling the method tableDnD and save the changes:

$("#gvDetails").tableDnD(
    onDrop: function(table, row) {
        console.log("Save changes");
    }
);

You can review this documentation:

https://github.com/isocra/TableDnD/blob/master/js/jquery.tablednd.js

Or if you had this already figurated out, maybe this other answer can help you:

TableDnD onDrop event not firing

Community
  • 1
  • 1
bcngr
  • 745
  • 6
  • 13