webix datatable dynamic celll template

Hello Webix Forum.

I have datatable that use cell template.
I can create cell template with static template.

My Question, is there any method to have dynamic cell template in datatable depend on data value on datatable ?

for example if i have a column that have value then i will use cell template format A if the the column didn't have value i will use cell template format B.

I hope i can get answer from this forum.


  • edited December 2017

    columns template receives 5 arguments:

        template: function(obj, common, value, config, rowIndex) {
    1. current datarow object {id:1, field1:"abc", field2:5}
    2. common methods (like common.checkbox())
    3. current cell value
    4. current column config
    5. current datarow index

    then you can return any template depending on required parameter

  • Dear Integral,

    Thank you for your information.

    i would like to ask again.
    for the column property i get a response json string for column property from my backend.

    {"id":"supplier_id","header":"Supplier Id","fillspace":false,"hidden":false,"width":150,"css":"grid-column-data-text","sort":"string","editor":"text","template":"function(obj){debugger;}"}

    and in webix i just assign datatable column like this:
    columns: response.columns

    the template is write as string value into datatable not as function.

    Is it possible to have template function as function if i do with this method ?

  • unfortunately, JSON does not serialize/deserialize functions.
    that's why your template does not work.
    you can use eval to "deserialize" template

    response.columns.forEach(function(cfg) {
        if(typeof cfg.template == "string"){
            eval("cfg.template = "+cfg.template);


  • Dear Integral,

    Thank you for your explanation.
    after i use eval to deserialize template then in webix datatable i just assign column like this
    column = response.columns,

    is it true ?

  • yes, you can set columns this way

    var config = {
    config.columns = response.columns;
    var config = {
       columns: response.columns
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!