Search code examples
tabulator

Tabulator callEditCancelled Callback: How to the Determine Key Code?


I am attempting to capture the key code which triggered a cellEditCancelled callback within Tabulator as follows:

var table = new Tabulator(divId, {
    cellEditCancelled: function (cell) {
        //cell - cell component
        var col = cell.getField();
        var mycode= event.which || event.keyCode;  //'event' is undefined
        alert("cellEditCancelled called\ncolumn: " + col + "\nkeyCode: " + mycode);
    },
    columns: [
        { title: "Project ID", field: "Projectid", widthGrow: 1, responsive: 0, hozAlign: "center", editor: "autocomplete", editorParams: { showListOnEmpty: true, allowEmpty: false, values: window.projectIdList } },
        { title: "Cust Job", field: "CustomerJobId", widthGrow: 1.25, responsive: 0, hozAlign: "center", editor: "autocomplete", editorParams: { showListOnEmpty: true, allowEmpty: false, values: window.customerJobIdList } },
        { title: "Project Desc", field: "ProjectDesc", widthGrow: 1.5, responsive: 0, hozAlign: "center", editor: "autocomplete", editorParams: { showListOnEmpty: true, allowEmpty: false, values: window.projDescList } },
    ]
});

Unlike other callbacks within Tabulator the callEditCancelled callback apparently does not expose an event object. (For example, the cellClick callback exposes an event object in its associated function signature.)

I need to differentiate between keyCode values in order to determine how to handle the callEditCancelled event. For example, clicking the Tab key would be handled differently than clicking the Esc key.

It's gotta be something simple. What am I missing?

Any assistance is greatly appreciated.


Solution

  • The event object isn't passed into this function because an cancel edit event isn't triggered by a key press, it could be triggered by any number of things:

    • Loss of focus
    • Keypress
    • Mouse event
    • Scroll
    • Table resize
    • Row update
    • the cancelEdit function being called on the cell component or table

    If you are just talking about key events then it is not actually up to the table when to trigger a cancel event, these are actually handled individually by each editor, each editor has a series of bindings that listen for loss of focus or certain key events and can then choose to either do nothing, trigger a success or a cancel function.

    Further details on this can be found in the Editor Documentation

    For these reasons there is no event object passed into the callEditCancelled callback. by the time this function has been called the edit has been cancelled and there is nothing that can be done to stop that.

    If you are specifically looking to track the key events then you could look at adding a listener to the document that listens for the last keypress/mouse event and stores that event object in a globally accessible variable. You could then check that variable in the callEditCancelled callback to see what the last event was.