Using inline editor and keytable with a function in onblur breaks keytable

AfricanB

Hi

I am using the following function to update the DB on blur:

$('#tblFinancials').on('key-focus', function (e, datatable, cell) {
mytable_editor.inline(cell.index(), {
onBlur: function (cell) {
//save to db
updateFinancialValue();
}
});
});

But then keyTable doesn't work as expected (with tab) and only works with enter key pressed. It also doesnt set focus to the next row if working on the last column.

If I use the following:

$('#tblFinancials').on('key-focus', function (e, datatable, cell) {
mytable_editor.inline(cell.index(), {
onBlur: 'submit'
});
});

Then keyTable works as expected but I cant update the DB with my own function.

Please help

AfricanB

I solved my issue. For anyone who this might help:
I use the editor's ajax method which i wasn't using before. silly me.

  mytable_editor = new $.fn.dataTable.Editor({
    ajax: function (method, url, data, successfn, errorfn) {
      if (data.action === 'edit') {
        $.each(data.data, function (key, value) {
          updateFinancialValue(key, value, successfn);
        });
      }
    },
    table: "#tblFinancials",
    idSrc: "GID",
    fields: [{
      label: "Number of Employees:",
      name: "PermanentEmployeeCount"
    },{
      label: "Employee Earnings:",
      name: "PermanentEmployeeEarnings"
      }],
    formOptions: {
      inline: {
        onBlur: 'submit'
      }
    }
  });

  // Inline editing on click
  $('#tblFinancials').on('click', 'tbody td:not(:first-child)', function (e) {
    mytable_editor.inline(this);
  });

  // Inline editing on tab focus
  $('#tblFinancials').on('key-focus', function (e, datatable, cell) {
    mytable_editor.inline(cell.index());
  });

function updateFinancialValue(rowGID,data, onSuccess) {
  var colIndex = mytable_editor.modifier().column;
  var rowIndex = mytable_editor.modifier().row;
  var rowData = mytable.row(rowIndex).data();
  var columnValue = "";
  var columnName = "";

  switch (colIndex) {
    case 2:
      columnValue = data.PermanentEmployeeCount;    
      columnName = "NumberofEmployees";
      rowData.PermanentEmployeeCount = columnValue;
      break;
    case 3:
      columnValue = data.PermanentEmployeeEarnings;
      columnName = "EmployeeEarnings";
      rowData.PermanentEmployeeEarnings = columnValue;
      break;
  }

  $.ajax({
    url: $.buildAbsoluteUrl('/Financial/UpdateFinancialValue', ""),
    type: "POST",
    data: {
      GID: rowGID,
      Value: columnValue,
      ColumnName: columnName
    },
    success: function (data) {
      //very important for inline editor to work. needs entire row returned
        onSuccess({ 
        "data": [
          rowData
        ]
      })
    },
    error: function () {

    }
  });
}

allan

Thanks for posting back. Great to hear you've got it working now.

Allan