Issues with rowReorder - dataSrc field does not update in UI after rowReorder

cj1005 · October 2020

Hi,

Link to test case:
https://www.wd4g.com/WCGateway/WDLogin.wc
un: DT
ps: DT
Then click on the big blue button to load the test case.

Description of problem:

I have followed the instructions in the example for rowReorder as best I can and now I can drag n drop rows but the dataSrc column does not change within the datatable UI. Am I correct in thinking this should change before the submit?

Oddly when doing a rowReorder the only fields submitted are two checkbox fields called 'tds' and 'bold' (see example below).

Currently the dataSrc for rowReorder is 'qsjob.sort' but when I perform a rowReorder the following is transmitted as the ajax data:

data[20380][qsjob][bold]=&data[20380][qsjob][tds]=&data[20381][qsjob][bold]=&data[20381][qsjob][tds]=&action=edit

When I'd expect to see just the dataSrc field 'sort' for each column affected.

I have not written the backend part yet, as the form is not submitting the correct data, so in the 'Network Activity' you will see no response from the server, when doing a rowReorder.

I did try using the 'form options' to send all fields which did work, but because the dataSrc had not changed, there is no actual change to commit.

If someone could please take a look and advise, that would be greatly appreciated.

Cheers, Chris

cj1005 · October 2020

Hi,

I've been playing about with this and I've managed to find out what stops the UI working, on the line below, if I remove the 'editor: editor' the UI then works

    rowReorder: { dataSrc: 'test.id', editor: editor }

I was under the impression the 'editor' was needed to submit the rowReorder changes, is that correct?

What I need to do now is find out how I get the rowReorder to submit the changes via Ajax?

Ta, Chris

cj1005 · October 2020

I have added another option to the test case above called 'RowReorder2'.

This shows the rowReorder UI working (the data is loaded via Ajax) but I had to remove the 'editor: editor' from the rowReorder{} object to get this to work, if I add the 'editor: editor' settings then the rows still move but the ID column does not update.

Hope this helps.
Chris

cj1005 · October 2020

I'm stuck on this "editor" issue, the only two differences I can see between the examples and my code are as follows:

I have an "idSrc" on my editor
My "dataSrc" for the rowReorder is a nested object, meaning rather than being 'order' it is 'diary.order'

My full code is as follows (with the rowReorder "editor" included) :


<style>
#result {
        border: 1px solid #888;
        background: #f7f7f7;
        padding: 1em;
        margin-bottom: 1em;
    }
</style>

<SCRIPT>

var table;
var editor;

$(document).ready(function() {

  editor = new $.fn.dataTable.Editor( {
    ajax:  'AjaxRowReOrder.wc',
    table: '#ConfigMenuTable',
    "idSrc": "recno",
    fields: [
      { label: 'Order', name: 'test.readingOrd' },
      { label: 'label',  name: 'test.label' }
    ]
  });

  table = $('#ConfigMenuTable').DataTable({
    "pageLength": 50,
    dom: 'Bfrtip',
    ajax: 'AjaxRowReOrder.wc',
    columns: [
     { data: 'test.readingOrd', className: 'reorder' },
     { data: 'test.label' }
    ],
    rowReorder: { 
      dataSrc: 'test.readingOrd',
      editor: editor,
      formOptions: { submit: 'allIfChanged' }
    },
    "select":    true,
    buttons: [
      { extend: 'create', editor: editor },
      { extend: 'edit',   editor: editor },
      { extend: 'remove', editor: editor }
    ]
  });

    editor
        .on( 'postCreate postRemove', function () {
            table.ajax.reload( null, false );
        } )
        .on( 'initCreate', function () {
            editor.field( 'test.readingOrd' ).enable();
        } )
        .on( 'initEdit', function () {
            editor.field( 'test.readingOrd' ).disable();
        } );

    table.on( 'row-reorder', function ( e, diff, edit ) {
        var result = 'Reorder started on row: '+edit.triggerRow.data().test.label+'<br>';
        for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
            var rowData = table.row( diff[i].node ).data();
            result += rowData.test.label+' updated to be in position '+
                diff[i].newData+' (was '+diff[i].oldData+')<br>';
        }
        $('#result').html( 'Event result:<br>'+result );
    } );

});

<div id="result">
        Event result:
</div>
<br>

<table id="ConfigMenuTable" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
           <th>Order</th>
           <th>Label</th>
     </tr>
  </thead>
  <tbody>
  </tbody>
</table>

allan · October 2020

Thanks for the test case. I'm seeing the Ajax request going out (in the "RowReorder") example - but it doesn't appear to be getting anything in response.

Are you using one of our Editor server-side libraries?

Allan

cj1005 · October 2020

Hi Allan,

Thank you for looking at my issue

I have written my own server-side libraries (I had to do this to enable us to use web apps in conjunction with our legacy software). This is working for all CRUD requests, but I've blocked the response for rowReorder for debugging purposes.

When the form data is submitted, the 'qsjob.sort' data has not been changed and therefore I can not update my source data with the new row sequence. Is this behavior normal, I was expected the 'qsjob.sort' to change before submitting?

It does if I disconnect the 'editor' from the rowReorder settings, but then I lose the ability to submit the changes...lol

For example: If you look at the test case "RowReOrder2" you will see the dataSrc is changing as I move rows, but as I mentioned I had to disconnect the "editor" to get this to work.

Thanks, Chris

tangerine · October 2020

    rowReorder: {
      dataSrc: 'test.readingOrd',
      editor: editor,
      formOptions: { submit: 'allIfChanged' }
    },

Is your Editor object actually named "editor"?

cj1005 · October 2020

Hi Tangerine,

I believe so, see line 17 above

editor = new $.fn.dataTable.Editor( {

tangerine · October 2020

Yep, sorry, I should have checked your whole code.

cj1005 · October 2020

Hi Allan,

My server-side libraries are now processing and responding to the rowReorder request.

The issue I'm still stuck on is after a rowReorder the form submission does not contain the expected changes to the dataSrc, after moving a record I would expect the dataSrc field to change, and then I can process the changes on my databases, but the parsed data is unchanged from its original state even though the row moves within the UI (until I refresh).

Any ideas welcome at this point as I'm well and truly stuck

Cheers, Chris

cj1005 · October 2020

For example, I have 3 rows and I drag row 3 into position 2 (moving row 2 into position 3), the ajax request is sent with the data below:

Please note, row data[20381] started in position 2 and row data[20382] started in position 3

I would have expected the [sort] to have changed for each of these rows to reflect their new positions, but it remains unchanged

data[20381][qsjob][sort]=2&data[20381][qsjob][urn]=2&data[20381][qsjob][qty]=2&data[20381][qsjob][cat]=007-1954430&data[20381][qsjob][stno2]=007-1954430&data[20381][qsjob][location]=&data[20381][qsjob][type]=&data[20381][qsjob][des]=NANO+ LED CONVERTER DALI 66W 700mA 50-60Hz 220-240&data[20381][qsjob][cpgbp]=137.33&data[20381][qsjob][price]=228.88&data[20381][qsjob][plperc]=40&data[20381][qsjob][bold]=&data[20381][qsjob][tds]=&data[20381][qsjob][grpno]=&data[20381][qsjob][grp]=C&data[20381][qsjob][quote]=2582&data[20381][qsjob][stno]=007-1954430&data[20382][qsjob][sort]=3&data[20382][qsjob][urn]=3&data[20382][qsjob][qty]=1&data[20382][qsjob][cat]=790&data[20382][qsjob][stno2]=790&data[20382][qsjob][location]=&data[20382][qsjob][type]=&data[20382][qsjob][des]=Carriage Charge&data[20382][qsjob][cpgbp]=8.50&data[20382][qsjob][price]=15&data[20382][qsjob][plperc]=43.33&data[20382][qsjob][bold]=&data[20382][qsjob][tds]=&data[20382][qsjob][grpno]=&data[20382][qsjob][grp]=M&data[20382][qsjob][quote]=2582&data[20382][qsjob][stno]=790&action=edit

Sorry about all the fields, I have to have "formOptions: { submit: 'allIfChanged' }".

Hope this helps?

Chris

allan · October 2020

Hi Chris,

Just to check in - I haven't forgotten about this, but the site doesn't appear to be loading for me at the moment. I'll try again tomorrow.

Allan

cj1005 · October 2020

Hi Allan,

Sorry, it is on my development server which I've been doing some work on, hence why it was offline.

But, the good news is I've found a way to make it work, I disabled the rowReorder connection to the 'editor' and then I added the following code:

qsjobTable.on( 'row-reorder', function ( e, diff, edit ) {
        for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
            var rowData = qsjobTable.row( diff[i].node ).data();
            result += rowData.recno + ':' + diff[i].newData+'('+diff[i].oldData+')' + '-';
        }
    
    $.ajax({ url: "AjaxGetData.wc?ti=rf&fl=DTrowReorder&key=CALLFUNC;"+updateTable+"xzx"+result,
    type: "POST",
    }
});

Basically, I pinched some code from another thread that gathered all the rowReorder results, and then I post them to a custom Ajax request which updates the source data.

It is slightly frustrating not knowing why the editor route did not work, but, I'm just pleased it is working now! I'm off for a beer

Thank you for your help and guidance.
Chris

allan · October 2020

A beer... I've got a glass of milk at the moment and would much rather it be a nice ale!

Still, it's good to hear you've got this working, albeit in a roundabout way. If you use RowReorder again with Editor and run into problems in future, just drop me a message back and I'll look into it.

Allan

cj1005 · October 2020

Thank you, much appreciated

Issues with rowReorder - dataSrc field does not update in UI after rowReorder

Issues with rowReorder - dataSrc field does not update in UI after rowReorder

Answers

Howdy, Stranger!

Categories

DataTables

Issues with rowReorder - dataSrc field does not update in UI after rowReorder

Issues with rowReorder - dataSrc field does not update in UI after rowReorder

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables