CODEWITHSUNDEEP
javascripttabulator
McLoo
McLoo

Reputation: 13

Tabulator: dynamic built-in editor (and formatter)

with the data

[
{"ID":1, "value":"Text Value", "type":"text"},
{"ID":2, "value":"1", "type":"bool"},
{"ID":3, "value":"-1.23", "type":"numeric"},
{"ID":4, "value":"0", "type":"undefined"}
]

and the colums

[
{"title": "ID", "field": "ID" , "sorter": "number"},
{"title": "ID", "field": "value" , "editor": ??? },
{"title": "ID", "field": "type" , "visible":false}
]

How can I get a dynamic editor for the value column depending on the values of the type column in each row? I achived this for the formatter but only by pasting the complete formatterXY.js code in formatter: function(cell) {...}

Basicly I'd love to have sth. like

"editor": function(...) {
 
     switch(...row.type) {
      case "bool":
        return "tickCross";
        break;
      case "numeric":
        return "number";
        break;
      default:
        return "input";
    } 
}

(Currently I'm on 4.9.3 - gotta rewrite for 5.x)

I tried the same aproach as for the formatter. But I does not seem that the data is available at the point the editors are defined...

Upvotes: 1

Views: 533

Answers (1)

Oli Folkerd
Oli Folkerd

Reputation: 8368

You cant define the editor at run time in that way I'm afraid.

What you are doing there is returning the text content for the cell rather than the editor.

There isnt really a built in way to do this, but i could suggest a bit of a hack that would return and call the editor functions you need by finding them on the edit module, which assuming you have Tabulator defined on the Tabulator variable, can be found on the Tabulator.moduleBindings.edit.editors object.

So you could take your example above, but instead call the appropriate editor function passing in the arguments passed into your custom editor, and return the result:.

"editor": function(...args) {
 
     switch(...row.type) {
      case "bool":
        return Tabulator.moduleBindings.edit.editors.tickCross(...args);
        break;
      case "numeric":
        return Tabulator.moduleBindings.edit.editors.number(...args);
        break;
      default:
        return Tabulator.moduleBindings.edit.editors.input(...args);
    } 
}

Upvotes: 1

Related Questions