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

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

cj1005cj1005 Posts: 144Questions: 46Answers: 1

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

This question has an accepted answers - jump to answer

Answers

  • cj1005cj1005 Posts: 144Questions: 46Answers: 1

    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

  • cj1005cj1005 Posts: 144Questions: 46Answers: 1

    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

  • cj1005cj1005 Posts: 144Questions: 46Answers: 1

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

    1. I have an "idSrc" on my editor
    2. 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>
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    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

  • cj1005cj1005 Posts: 144Questions: 46Answers: 1
    edited October 2020

    Hi Allan,

    Thank you for looking at my issue :smile:

    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

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395
        rowReorder: {
          dataSrc: 'test.readingOrd',
          editor: editor,
          formOptions: { submit: 'allIfChanged' }
        },
    

    Is your Editor object actually named "editor"?

  • cj1005cj1005 Posts: 144Questions: 46Answers: 1

    Hi Tangerine,

    I believe so, see line 17 above

    editor = new $.fn.dataTable.Editor( {
    
  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

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

  • cj1005cj1005 Posts: 144Questions: 46Answers: 1

    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 :neutral:

    Cheers, Chris

  • cj1005cj1005 Posts: 144Questions: 46Answers: 1

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    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

  • cj1005cj1005 Posts: 144Questions: 46Answers: 1

    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 :wink:

    Thank you for your help and guidance.
    Chris

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Answer ✓

    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

  • cj1005cj1005 Posts: 144Questions: 46Answers: 1

    Thank you, much appreciated :smile:

This discussion has been closed.