webix datatable dynamic celll template

Webix JS
#1

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.

#2

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
https://docs.webix.com/datatable__templates.html#builtintemplates

#3

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.

Example:
{“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 ?

#4

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);
    }
});
#5

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 ?

#6

yes, you can set columns this way

var config = {
   ...
};
config.columns = response.columns;
OR
var config = {
   ...,
   columns: response.columns
};