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

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

AfricanBAfricanB Posts: 2Questions: 1Answers: 0

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

Answers

  • AfricanBAfricanB Posts: 2Questions: 1Answers: 0
    edited August 14

    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 () {
    
        }
      });
    }
    
  • allanallan Posts: 43,557Questions: 1Answers: 5,703 Site admin

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

    Allan

Sign In or Register to comment.