Tabulator - Update Value of Custom Editor for Money Column

Question

I'm trying to update a money column value in a custom editor (because I want the decimal symbol, currency symbol and thousand symbol to show while editing - then I'll change it back when submitting)

Here's code so far (doesn't have symbols add or strip yet, just trying to get update to work properly. There's a cellClick set up that calls the following code when cell format is type of money:

var inpck = $(mycell).find('input').length;

if (inpck == 1) {
    console.log('Input Already Exists'); 
    return;
}​​​​​​​

$(mycell).html($(mycell).find('input')); // remove text node of orig cell

$(mycell).append('<input type="text">'); // add input box

var editor = $(mycell).find('input');

//Set value of editor to the current value of the cell
console.log('Start Money Val: ' + celltxt); // shows correctly
editor.val(celltxt);

// Set focus on the input when the editor is selected (timeout allows for editor to be added to DOM)
editor.focus();

// After editing, trigger the cell to update on blur
editor.on("blur", function(e) {
  var editval = editor.val();
  alert('EditedValue: ' + editval); // shows correctly
  alert('CellID: ' + cellid); // shows correctly
  alert('CellField: ' + cellf); // shows correctly

  var updMonObj=[];
  updMonObj['id']=cellid;
  updMonObj[cellf]=editval;

  $("<tableid>").tabulator("updateData", updMonObj);
  $("<tableid>").tabulator("redraw");
});

After the alerts, the cell doesn't update and when I do a page refresh, the new value isn't coming in. Would like the cell to update and show new value w/o refreshing the entire table if possible.

Would also like a way to update when they hit return.

Thanks

Update1:

Ok now I have this (running v3.2- have to stick w/ older version for now):

In the column definitions, I think this should work:
,editor: "moneyEdit1";

Then the tabulator call, and then further down:

var moneyEdit1 = function(cell, onRendered, success, cancel, editorParams) {
  //define custom editor
  var inpck = $(cell).find('input').length;
  if (inpck == 1) {console.log('Input Already Exists'); return;}
  console.log('Inside Money Edit');
  var mycell = cell.getElement();
  console.log('MyCell: ' , mycell);

  $(mycell).html($(mycell).find('input')); // remove text node
  $(mycell).append('<input type="text">');
  var editor = $(mycell).find('input');

  // Set value of editor to the current value of the cell
  console.log('Start Money Val: ' + celltxt);
  editor.val(celltxt);

  // Set focus on the input when the editor is selected
  onRendered(function() {
    editor.focus();
    editor.style.width = "100%";
  });

  // After editing, trigger the cell to update
  successFunc(function() {
    console.log('Inside of Change/Blur/Enter');
    var editval = editor.val();
    alert('EditedValue: ' + editval);
    success(editval);
  });

  // If they cancel w/ escape key
  cancelFunc(function() {
    console.log('Inside of Cancel');
    cancel(editval);
  });
  editor.addEventListener("change", successFunc);
  editor.addEventListener("blur", successFunc);
  editor.addEventListener("keyup", function onEvent(e) {
    if (e.which === 13) {successFunc;}
  });
  editor.addEventListener("keyup", function onEvent(e) {
    if (e.which === 27) {cancelFunc;}
  });
  // Return the editor element
  return editor;
}

Does that look like it should work? Still doesn't call the custom editor, as I don't see any of the console logs, what's wrong?

Answer 1

You have missed of the function definition for that editor in your example code. In the Editor Documentation you will see that there are two functions passed into the 3rd and 4th arguments of the function, success and cancel

var custom editor = function(cell, onRendered, success, cancel, editorParams){
   //define custom editor
}

you should call these function to let tabulator know that an edit has been successful or has been canceled.

In your editor you shouldnt be calling the updateData or redraw functions. Instead you should be calling the success function and passing the new value into it:

success(editval);