Ui_tabulator Node - tickedCross Selection

General
1

Hello All

I`m using the ui_tabulator Node.
In the table I have a column "tickedCross", and this column is editable.
The editParams-value "tristate" is false.
But when I clieck on this column in any row it shows this behavious:
First and initial state is "false".
After first click the column shows an empty field.
After second click the field is "true" (green tick).
After third cleck the field is blue with a white tick.
After fourth click it is false again (red cross).

This seems not to be the right behaviour. Can I change this somehow, so that I only have to click once for each state?

Thanks.

2

This is related to the behavior of Tabulator (the 3rd-party package which ui-tabulator is wrapping).
By default, Tabulator's built-in tick/cross formatter does not refresh the displayed icon until the updated cell loses focus. You can either replace it with your own custom formatter, or simply provide some "on Click" callback which tells the cell to refresh immediately. For example:
Table configuration:

{
   "height": 200,
   "columns": [
      {"title":"Id","field":"id","width":60},
      {"title":"Name","field":"name","width":150},
      {"title": "Active?", "field": "active","hozAlign": "center",
           "formatter": "tickCross","editor": true,"cellClick":"@F:onTick"}
   ],
   "data": [
      {"id":1,"name":"Line 1", "active":true},
      {"id":2,"name": "Line 2", "active":false}
   ]
}

Function to set in the "custom functions" area:

function onTick(e,cell)
{
    cell.setValue(!cell.getValue(),true);
    cell.getRow().reformat(); // ensures formatter refreshes right away
}

Within the callback, you can also add additional consequent actions, such as updating other table fields, invoking actions & notifications etc.

3

Works perfect. Thanks.