Answers

• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  March 2016

  Hi Karamvir,

  Thanks for your message. Do you want the focus to then move on to the next cell when you press tab? If so, this example which uses KeyTable to provide the key handling should work well for you.

  Note you will probably also wish to set the onBlur: 'submit' option in form-options object when you call inline().

  Regards,
  Allan
• WilliamW Posts: 2Questions: 0Answers: 0

  March 2016

  Hi Allan,

  I believe the issue is that the TAB action only sends the field that was modified (i.e. [last_name]) instead of all fields in the row being edited. In the link to the example you reference, I changed the last name for Row 6, and the Ajax Data submitted is:

  action=edit
  data[row_6][last_name]=Williamson%2C Jr.
  

  The same action happens when you modify the field and hit <return> - the Ajax data submitted is only the field modified.

  In the example that Karamvir referenced:

  • https://editor.datatables.net/examples/inline-editing/submitData.html

  ...you can edit a field, and if you hit "<return>", the entire row dataset is submitted:

  action=edit
  data[row_6][first_name]=Brielle
  data[row_6][last_name]=Williamson%2C Jr.
  data[row_6][position]=Integration Specialist Mgr.
  data[row_6][office]=New York
  data[row_6][extn]=4804
  data[row_6][start_date]=2012-12-02
  data[row_6][salary]=372000
  

  In the above example, I added "Mgr." to the [position] field and hit <return> which submitted all fields in the row.

  It looks like the way to submit the entire row of data is by adding the "allIfChanged" option:

      $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
          editor.inline( this, {
              submit: 'allIfChanged'
          } );
      } );
  

  ...but this does not seem to work with inline-edit and a <TAB> action.

  Any chance you have an example with inline-editing where a TAB out of a modified field will submit the entire row of data? We would really like to use the inline-edit feature, but my understanding from Karamvir is that our back-end handler will be easier to implement for Change or Update if we have the full row of data submitted.

  Thanks for your help, Allan!

  William
• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  March 2016 Answer ✓

  Hi William,

  Thanks for the clarification! The way to set the submit option of the form-options object when using KeyTable is to use the formOptions.inline object. For example:

  var editor = new $.fn.Editor( {
      ajax:  "php/staff.php",
      table: "#myTable",
      formOptions: {
          inline: {
              submit: 'allIfChanged'
          }
      }
  } );
  

  The reason for this is that KeyTable calls inline() itself, so we need to be able to set the form options. Using the initialisation options as above is how that can be done.

  Regards,
  Allan
• WilliamW Posts: 2Questions: 0Answers: 0

  March 2016

  Thank you for clarifying, Allan! I believe that we have this working now.

  William
• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  March 2016

  Hi William,

  Great to hear - thanks for the update.

  Allan