Jquery Datatable RowOrder Drag&Drop and Id Problem?

msm_baltazar

Please help me to solve problem row order drag and drop and sequence problem? Friends

https://stackoverflow.com/questions/59556297/asp-net-mvc-jquery-datatable-roworder-dragdrop-and-id-problem

kthorngren

Its preferable that you post your question here so others don't need to leave the site to find what you are asking.

the rowReorder.dataSrc property should be used, as described in this thread. But when the datasrc property is given the question id of its own data, the lines change when you drag and drop, but the id part always remains in order. Of course, it's ridiculous that id lines are placed in ascending order while the lines of the questions are changing.

This is expected and described in the RowReorder docs.

RowReorder operates on a data swap method so it can operate even on non-sequential data.

The data point in the row that is modified is defined by the rowReorder.dataSrc. Normally you will want this to be a sequential number! The data reorder can potentially confuse end users otherwise!

Basically it is stating that the column used for the data source is to be sorted and that values are swapped in order to keep the table in the reordered order.

You have this:

        "columns": [
            {"data": "QuestionId"},
            {"data": "QuestionName"}
        ],
        //responsive: true,
        ordering: false,
        info:true,
        rowReorder: {
            dataSrc: 'QuestionId',
            selector: 'tr'
        },

If you don't want the QuestionId column to change then you will need an additional column to server of the rowReorder.dataSrc column. You can either generate the index in your server response or you can use something like this example to have Datatables initially generate the column: You can also hide this column.

Kevin

msm_baltazar

I applied but I am getting an error like; DataTables warning: table id=rightTable - Requested unknown parameter '' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

kthorngren

How did you apply this? Please post your updated Datatables code along with and example of your JSON data.

Kevin

msm_baltazar

@kthorngren Brother, I need your immediate help. I haven't made any progress in two days. I've dealt with both reordering the rows in the same table and moving the table from any table to another table. They're both possible at the same time. Sorting will only be done on the right table. But transport can be between two tables. How can I do that. Or is there an alternative way. Please, I'm waiting for your immediate help. I'm attaching the necessary files.

Datatables(left &right)
$(document).ready(function() {
var leftTable = $("#leftTable").DataTable({
select: true,
responsive: true,
//"order": [[0, "asc"]],
//"scrollX": true,
//"scrollY": "auto",
"columnDefs": [
{ width: '20%', targets: 0 }
],
"columns": [
{ "data": "QuestionId" },
{ "data": "QuestionName" }
],
"ajax": {
"url": "/Survey/GetAllQuestions",
"type": "POST",
"data": { "surveyId": surveyId },
"datatype": "int"
},
"language": {
"emptyTable":
"<b>No questions to be associated with the survey.</b>"
}
});

    var rightTable = $("#rightTable").DataTable({
        select: true,
        responsive: true,
        ordering: false,
        //"scrollX": true,
        //"scrollY": "auto",
        rowReorder: {
            dataSrc: 'id',
            selector: 'tr'
        },
        "columnDefs": [
            { width: '20%', targets: 0 }
        ],
        "columns": [            
            { "data": "id" },
            { "data": "QuestionId" },
            { "data": "QuestionName" }
        ],
        "ajax": {
            "url": "/Survey/GetRelatedQuestions",
            "type": "POST",
            "data": { "surveyId": surveyId },
            "datatype": "int"
        },
        "language": {
            "emptyTable":
                "<b>No questions related to the survey were found.</b>"
        }
    });

   rightTable.on( 'order.dt search.dt', function () {
    rightTable.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    } );
     } ).draw();
    });

Json Data

   {
"data": [
 {
  "Responses": [],
  "Options": [],
  "SurveyQuestions": [],
  "QuestionId": 1,
  "QuestionName": "Merinos ürünlerinden ne kadar memnunsunuz?",
  "QuestionTypeId": 1,
  "CreatedDate": "/Date(1577048400000)/",
  "CreatedUserId": 1,
  "IsActive": true,
  "Status": true,
  "UpdatedDate": "/Date(1577964703320)/"
 },
 {
  "Responses": [],
  "Options": [],
  "SurveyQuestions": [],
  "QuestionId": 2,
  "QuestionName": "Merinosun satis magazalarindan memnun musunuz?",
  "QuestionTypeId": 1,
  "CreatedDate": "/Date(1577048400000)/",
  "CreatedUserId": 1,
  "IsActive": true,
  "Status": true,
  "UpdatedDate": "/Date(1577048400000)/"
 },
 {
  "Responses": [],
  "Options": [],
  "SurveyQuestions": [],
  "QuestionId": 3,
  "QuestionName": "Merinosun müsteri temsilcilerinden memnun musunuz?",
  "QuestionTypeId": 1,
  "CreatedDate": "/Date(1577048400000)/",
  "CreatedUserId": 1,
  "IsActive": true,
  "Status": true,
  "UpdatedDate": "/Date(1577048400000)/"
 }
]
}

the error I get

     ![](https://datatables.net/forums/uploads/editor/jo/s1b13ckgg5za.png "")

msm_baltazar

@kthorngren Brother, I need your immediate help. I haven't made any progress in two days. I've dealt with both reordering the rows in the same table and moving the table from any table to another table. They're both possible at the same time. Sorting will only be done on the right table. But transport can be between two tables. How can I do that. Or is there an alternative way. Please, I'm waiting for your immediate help. I'm attaching the necessary files.

Datatables

   $(document).ready(function () {
    var surveyId = $("#SurveyId").val();
    var leftTable = $("#leftTable").DataTable({
        select: true,
        responsive: true,
        //"order": [[0, "asc"]],
        //"scrollX": true,
        //"scrollY": "auto",
        "columnDefs": [
            { width: '20%', targets: 0 }
        ],
        "columns": [
            { "data": "QuestionId" },
            { "data": "QuestionName" }
        ],
        "ajax": {
            "url": "/Survey/GetAllQuestions",
            "type": "POST",
            "data": { "surveyId": surveyId },
            "datatype": "int"
        },
        "language": {
            "emptyTable":
                "<b>Ankete ilişkilendirilecek soru bulunamadı.</b>"
        }
    });

    var rightTable = $("#rightTable").DataTable({
        select: true,
        responsive: true,
        ordering: false,
        //"scrollX": true,
        //"scrollY": "auto",
        rowReorder: {
            dataSrc: 'id',
            selector: 'tr'
        },
        "columnDefs": [
            { width: '20%', targets: 0 }
        ],
        "columns": [
            {"data":"id"},
            { "data": "QuestionId" },
            { "data": "QuestionName" }
        ],
        "ajax": {
            "url": "/Survey/GetRelatedQuestions",
            "type": "POST",
            "data": { "surveyId": surveyId },
            "datatype": "int"
        },
        "language": {
            "emptyTable":
                "<b>Ankete ilişkilenmiş soru bulunamadı.</b>"
        }
    });
    rightTable.on('order.dt search.dt', function () {         rightTable.column(0, { search: 
   'applied', order: 'applied' }).nodes().each(function (cell, i) {
            cell.innerHTML = i + 1;
        });
    }).draw();
  });

Json Data

   {
  "data": [
   {
  "Responses": [],
  "Options": [],
  "SurveyQuestions": [],
  "QuestionId": 1,
  "QuestionName": "Merinos ürünlerinden ne kadar memnunsunuz?",
  "QuestionTypeId": 1,
  "CreatedDate": "/Date(1577048400000)/",
  "CreatedUserId": 1,
  "IsActive": true,
  "Status": true,
  "UpdatedDate": "/Date(1577964703320)/"
  },
  {
  "Responses": [],
  "Options": [],
  "SurveyQuestions": [],
  "QuestionId": 2,
  "QuestionName": "Merinosun satis magazalarindan memnun musunuz?",
  "QuestionTypeId": 1,
  "CreatedDate": "/Date(1577048400000)/",
  "CreatedUserId": 1,
  "IsActive": true,
  "Status": true,
  "UpdatedDate": "/Date(1577048400000)/"
  },
  {
  "Responses": [],
  "Options": [],
  "SurveyQuestions": [],
  "QuestionId": 3,
  "QuestionName": "Merinosun müsteri temsilcilerinden memnun musunuz?",
  "QuestionTypeId": 1,
  "CreatedDate": "/Date(1577048400000)/",
  "CreatedUserId": 1,
  "IsActive": true,
  "Status": true,
  "UpdatedDate": "/Date(1577048400000)/"
  }
 ]

}

The error I get on browseronce I drag and drop line

kthorngren

The Column Index example I pointed you to won't directly work because it updates the HTML not the Datatables data cache. Also it is executed each time the table is sorted or searched which won't work with using RowReorder. It will need to be changed to update the Datatables data cache with something like cell().data(), for example:

    rightTable.column(0, {search:'applied', order:'applied'}).nodes().each( function (td, i) {
      var cell = rightTable.cell( td );
      cell.data(i+1);
    } );
    // Display generated reorder indexes
    rightTable.draw();

Also it will need to be executed after Datatables initialization and each time you move rows between tables. I created an example using your example data.
http://live.datatables.net/gexikuwe/1/edit

I created a function to reindex the index column.

In your rightTable you have:

      "columns": [
          {"data":"id"},
          { "data": "QuestionId" },
          { "data": "QuestionName" }
      ],

The {"data":"id"}, is causing the alert message because you don't have an id in your data. Instead you can use defaultContent for this column. In my example I set it to a so the rows moved from left to right are sorted to the bottom of the table. Change the defaultContent to "" if you want to sort the moved rows to the top.

You will need to decide how you want to handle selecting rows and what you want to allow to be clicked for RowReorder. In the example I used select.selector to ignore the first column in the right table and RowReorder only uses the right column for ordering. You can remove the select.selector and let the row be selected while reordering. Another option would be to use Checkbox Selection.

As a bonus I added a button to manually reindex the index column when you move rows from left to right. After you move them click the Reindex reorder column button. This will show you how the reindexing works.
http://live.datatables.net/duwodapi/1/edit

Kevin

msm_baltazar

@kthorngren this worked for me, but when the default content is all 'a', it stops reordering. By the way, I don't use the reindexing button.

kthorngren

but when the default content is all 'a', it stops reordering. By the way, I don't use the reindexing button.

I'm assuming you are referring to the second example. The second example with the reindex button is just to show you how the sorting process works. Its not meant to be the solution.

Kevin