Answers

• dynasoft Posts: 446Questions: 69Answers: 3

  June 2019

  Please ignore this part of my post: Also how do I set the value for ReadingOrder when adding a new row via create().submit() api and or remove a row via row().remove().
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 2019

  ordering: false,

  Remove this. The order of the rows in the DataTable is entirely down to the ordering of the data applied to the table. You can use columns.orderable set to false if you don't want to allow end users to modify the sorting. But RowReorder effectively depends upon the table sorting to display the data in the order you'd expect.

  Allan
• dynasoft Posts: 446Questions: 69Answers: 3

  June 2019

  Hi. Thanks but I still get the same issue. Here's my current JS code:

          editor3 = new $.fn.dataTable.Editor({
  
              ajax: '/BillingFiles/CRUDAdvFileField/',
              table: '#tblFileFieldTable',
              fields: [ {
                      label: 'id',
                      name: 'id'
                  }, {
                      label: 'Order',
                      name: 'ReadingOrder',
                      fieldInfo: '@(lblo.lblFieldEditedClickDrag)'
                  }, {
                      label: 'FieldID',
                      name: 'FieldID'
                  }, {
                      label: 'FieldType',
                      name: 'FieldType'
                  }
              ],
              i18n: {
                  error: {
                      system: '@(lblo.lblError5)'
                  }
              }
          });
  
          var dataTable = $('#tblFileFieldTable').DataTable( {
  
              scrollY: '300px',
              scrollCollapse: true,
              paging: false,
              info: false,
              bFilter: false,
              order: [[0, 'asc']],
              columnDefs: [
                  { 'bVisible': false, 'targets': 0 },
                  { 'bVisible': false, 'targets': 2 },
                  { 'bVisible': false, 'targets': 4 },
                  { 'orderable': false, 'targets': [ 1,2,3,4,5,6 ] }
              ],
              dom: 'Bfrtip',
              //ajax: {
              //    url: '/BillingFiles/CRUDAdvFileField/',
              //    type: 'GET',
              //    async: true,
              //    dataType: 'json',
              //    contentType: 'application/json; charset=utf-8',
              //},
              ajax: '/BillingFiles/CRUDAdvFileField/',
              columns: [
                  { data: 'id' },
                  { data: 'ReadingOrder', className: 'reorder' },
                  { data: 'FieldID' },
                  { data: 'FieldType' }
              ],
              rowReorder: {
                  dataSrc: 'ReadingOrder',
                  editor:  editor3
              },
              select: true,
                 buttons: [
              ],
              language: {
                  zeroRecords: '@(lblo.lblNoDataFound)',
                  loadingRecords: '@(lblo.lblLoading)',
                  emptyTable: '@(lblo.lblNoDataFound)'
              }
          });
  
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 2019

  order: [[0, 'asc']],

  Which is id. But dataSrc: 'ReadingOrder', for RowReorder (which is column index 1).

  So its sorting by id, but data swapping on ReadingOrder. Try:

  order: [[1, 'asc']]
  

  Allan
• dynasoft Posts: 446Questions: 69Answers: 3

  June 2019

  Many thanks Allan. That worked.
• FrankC Posts: 6Questions: 0Answers: 0

  June 2019

  I am having a similar issue, but I can't seem to resolve it based on what I've read in the Docs and this thread. I added a select checkbox as my first column, so my "rank" column is now the second in the table. I updated the order attribute to order on column index 1, and I have rowReorder set to:
  rowReorder: { dataSrc: 'rank', editor: editor, enable: true, selector: '.reorder', update: true, formOptions: { submit: 'allIfChanged' } },
  I would like the rank column to automatically update so that the new rank can be updated in the database.

  Referenced this in the docs: https://datatables.net/reference/option/rowReorder.update
• colin Posts: 15,240Questions: 1Answers: 2,599

  June 2019

  Hi @FrankC ,

  Have you followed the diagnostic paths in this thread - as it was resolved here for the OP? If so, and it's still an issue, could you post your client and server code, please, as the OP did.

  Cheers,

  Colin
• FrankC Posts: 6Questions: 0Answers: 0

  June 2019 edited June 2019

  Hi @colin, i just saw your response. I still have not had luck. I have found what was preventing datatables from updating the ranks, but when it saves to the database the ranks aren't updated, and some data is lost. I haven't explored into that issue yet as I want to figure out why two lines of code are preventing datatables from sorting. When the on('row-reorder') action fires, the edit event doesn't fire unless I comment out these two lines of code.

      editor.field('underwriterKey').update(uwNameOptions);
      editor.field('underwriterTypeKey').update(uwTypeOptions);
  

  Code is too long to include in one post, so i will break out into multiple comments.
• FrankC Posts: 6Questions: 0Answers: 0

  June 2019

  JS Code:
  // Global Variables
  var editor;
  var uwTypeOptions = [];
  var uwNameOptions = [];
  let NUM_ROWS = 0;
  let API_URL = '/api/underwriterrelationship';

  $(document).ready(function () {
      // Editor Initialization 
      editor = new $.fn.dataTable.Editor({
          //ajax: API_URL,
          ajax: {
              create: {
                  type: 'POST',
                  url: '/api/underwriterrelationship',
                  contentType: 'application/json',
                  data: function (data) {
                      console.log('create row ajax is running');
                      let postData = prepareDataToPost(data);
                      let dataToPost = JSON.stringify(postData);
                      return dataToPost;
                  }
              },
              edit: {
                  type: 'PUT',
                  url: '/api/underwriterrelationship',
                  contentType: 'application/json',
                  data: function (data) {
                      console.log('edit row ajax is running');
                      let postData = prepareDataToPost(data);
                      let dataToPost = JSON.stringify(postData);
                      return dataToPost;
                  }
              },
              remove: {
                  method: 'DELETE',
                  url: 'api/underwriterrelationship',
                  dataType: 'json',
                  beforeSend: function (request) {
                      request.setRequestHeader('content-type', 'application/json');
                  },
                  data: function (data) {
                      console.log('delete row ajax is running...');
                      let postData = prepareDataToPost(data);
                      let dataToPost = JSON.stringify(postData);
                      return dataToPost;
                  }
              }
          },
          table: '#tblUnderwriters',
          idSrc: 'ipoUnderwriterKey', // primary key
          fields: [
              {
                  label: 'Rank',
                  name: 'rank',
                  fieldInfo: 'This field can only be edited via click and drag row reordering.'
              },
              {
                  label: 'Underwriter Name',
                  name: 'underwriterKey',
                  type: 'select'
              },
              {
                  label: 'Underwriter Type',
                  name: 'underwriterTypeKey',
                  type: 'select'
              },
              {
                  label: 'IPO Underwriter Key',
                  name: 'ipoUnderwriterKey',
                  type: 'readonly'
              },
              {
                  label: 'IPO Key',
                  name: 'ipoKey',
                  type: 'readonly'
              }
          ],
          formOptions: {
              inline: {
                  submit: 'allIfChanged'
              }
          }
      });
  
      editor.on('open', function (e, json, data) {
          //console.log('form is opened.');
          // Select2 dropdown lists
          $('#DTE_Field_underwriterKey').select2({
              placeholder: 'Select an Underwriter',
              allowClear: true
          });
          $('.select2-container').removeAttr('style');
      });
  
      editor.on('postCreate', function (e, json, data, id) {
          console.log('postCreate function called.');
           // After create or edit, a number of other rows might have been effected -
           // so we need to reload the table, keeping the paging in the current position
          uwTable.ajax.reload(null, false);
          // increment the number of rows variable after the new row has been added to the table
          NUM_ROWS++;
      });
      editor.on('postRemove', function (e, json, ids) {
          console.log('postRemoe function is called.');
          // After create or edit, a number of other rows might have been effected -
          // so we need to reload the table, keeping the paging in the current position
          uwTable.ajax.reload(null, false);
          NUM_ROWS--;
      });
  
      editor.on('postSubmit', function (e, json, data, action, xhr) {
          console.log('postSubmit function called');
          if (json !== null) {
              let status = json.status;
              console.log('Submit status is: ' + status);
              if (status !== undefined && status !== 200) {
                  alert(json.title);
              }
              console.log(json);
          }
      });
      editor.on('preEdit', function (e, json, data, id) {
          console.log('preEdit function called');
      });
      editor.on('initCreate', function (e) {
          console.log('initCreate function called.');
      });
      editor.on('create', function (e, json, data) {
          console.log('create function called.');
      });
  
  
      // DataTable Initialization
      var uwTable = $('#tblUnderwriters').DataTable({
          dom: 'Bfrtip',
          ajax: {
              url: '/api/underwriterrelationship/' + $('#InfoForPage_IPOKey').val(),
              dataSrc: function (json) {
                  console.log('data is loading into the table...');
                  uwTypes = json.underwriterDropdowns.underwriterTypeDD;
                  uwNames = json.underwriterDropdowns.underwriterDD;
                  var option = {};
                  $.each(uwNames, function (i, e) {
                      option.label = e.text;
                      option.value = e.value;
                      uwNameOptions.push(option);
                      option = {};
                  });
                  $.each(uwTypes, function (i, e) {
                      option.label = e.text;
                      option.value = e.value;
                      uwTypeOptions.push(option);
                      option = {};
                  });
                  editor.field('underwriterKey').update(uwNameOptions);
                  editor.field('underwriterTypeKey').update(uwTypeOptions);
                  NUM_ROWS = json.ipoUnderwriterRelationships.length;
                  return json.ipoUnderwriterRelationships;
              }
          },
          order: [[1, 'asc']],
          columns: [
              {
                  data: null,
                  defaultContent: '',
                  className: 'select-checkbox',
                  orderable: false
              },
              {
                  data: 'rank',
                  className: 'reorder rank'
              },
              {
                  data: 'underwriterKey',
                  render: function (data, type, row) {
                      if (type === 'display') {
                          return row.underwriterName;
                      }
                      return data;
                  }
              },
              {
                  data: 'underwriterTypeKey',
                  render: function (data, type, row) {
                      if (type === 'display') {
                          return row.underwriterTypeName;
                      }
                      return data;
                  }
              },
              {
                  data: 'ipoUnderwriterKey',
                  className: 'd-none'
              },
              {
                  data: 'ipoKey',
                  className: 'd-none'
              }
          ],
          columnDefs: [
              {
                  orderable: false,
                  //target: [1, 2, 3, 4, 5]
                  target: [0, 2, 3, 4, 5]
              }
          ],
          rowReorder: {
              enable: true,
              dataSrc: 'rank',
              editor: editor,
              selector: '.reorder'
          },
          select: {
              style: 'os',
              selector: 'td:first-child'
          },
          buttons: [
              { extend: "create", editor: editor },
              { extend: "edit", editor: editor },
              { extend: "remove", editor: editor }
          ],
          bFilter: false,
          autoWidth: true,
          keys: {
              columns: ':not(:first-child)',
              keys: [9],
              editor: editor,
              editOnFocus: true
          },
          bPaginate: false
      });
  
      uwTable.on('row-reorder', function (e, details, edit) {
          console.log('row-reoder function called');
          editor
              .edit(edit.nodes, false, {
                  submit: 'allIfChanged'
              })
              .multiSet(edit.dataSrc, edit.values)
              .submit();
      });
  });
  
  function prepareDataToPost(data) {
      let postData = []
      $.each(data, function (key, data_element) {
          if (key === 'data') {
              $.each(data_element, function (key, value) {
                  //CURRENT_KEY = key;
                  //console.log('key = ' + key);
                  //console.log('value = ' + value);
                  postData.push(value);
              });
          }
      });
      //console.log('postData is:');
      //console.log(postData);
      return postData;
  }
  
• FrankC Posts: 6Questions: 0Answers: 0

  June 2019 edited June 2019

  C# WebAPI Controller Action Code for Updates

         [HttpPut]
              public async Task<ActionResult<DataTablesReturnObj>> Update(IPOUnderwriterRelationship[] data)
              {
                  DataTablesReturnObj returnData = new DataTablesReturnObj();
                  if (ModelState.IsValid)
                  {
                      try
                      {
                          IPOUnderwriterRelationship[] dataArr = new IPOUnderwriterRelationship[data.Length];
                          for (int i = 0; i < data.Length; i++)
                          {
                              await _service.UpdateUnderwriterRelationship(data[i]);
                              var newUwr = await _service.GetUnderwriterRelationship(data[i].IPOUnderwriterKey);
                              // The returned data needs to be formated as an array
                              dataArr[i] = newUwr;
                          }
                          returnData.Data = dataArr;
                      }
                      catch (Exception e)
                      {
                          //return BadRequest(new { message = e.Message });
                          returnData.Error = e.Message;
                      }
                      return returnData;
                  }
                  returnData.Error = "ModelState is not valid.";
                  return returnData;
              }
  

  Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• FrankC Posts: 6Questions: 0Answers: 0

  June 2019

  I am adding, on the 'row-reorder' function, the line for .multiSet(edit.dataSrc, edit.values), edit.dataSrc = "rank" and edit.values = undefined:2.

  The columns in my data table are the datatables checkboxes in first column, rank column, and then 2 columns with dropdown lists using the select2 library to make the dropdowns into comboboxes.
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 2019

  These two lines:

  editor.field('underwriterKey').update(uwNameOptions);
  editor.field('underwriterTypeKey').update(uwTypeOptions);

  in initComplete are causing Editor to not submit on a row reorder?

  I fear this is something we really will need an example for. Editor will work on http://live.datatables.net - here is a basic editing example: http://live.datatables.net/nuvihosi/1/edit . Or even better, if there is a way to send me a link to your page, that would be great!

  Thanks,
  Allan
• FrankC Posts: 6Questions: 0Answers: 0

  June 2019

  Yes @allan, when those two lines are included in the data table initialization (under the ajax dataSrc property), then after the row-reorder function runs, the editor ajax functions do not run.
• colin Posts: 15,240Questions: 1Answers: 2,599

  June 2019

  Hi @FrankC ,

  Would you be able to link to your page or modify that test case that Allan posted, without seeing the issue it'll be hard to progress,

  Cheers,

  Colin
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 2019

  Try dropping this code:

      uwTable.on('row-reorder', function (e, details, edit) {
          console.log('row-reoder function called');
          editor
              .edit(edit.nodes, false, {
                  submit: 'allIfChanged'
              })
              .multiSet(edit.dataSrc, edit.values)
              .submit();
      });
  

  You are using rowReorder.editor so there should be no need to trigger Editor's edit on row reordering yourself. This example shows that.

  Allan