Datatable: Apply cell background and cell text color dynamically through code.

Webix JS
#1

I want to apply cell back ground color and cell text color based on certain condition. So I don’t want to you predefined existing style class but to give background color and text color dynamically.
How to achieve this ?

#2

Check http://docs.webix.com/datatable__styling.html#cells

#3

ok… I guess I am not able to fulfill my requirement from above example let me explain my requirement better. I am using custom filter in which I want to give different background and foreground color to cell for greater and less values. Now these bg | fg color are dynamic coming from server side.
For this use case I was trying to use addCellCss(… ) method. This method takes input predefined css class and in my case I don’t have predefined css class. What to do now ?

#4

You can create use createCss helper to build css classes dynamically.

http://webix.com/snippet/cf7fdd70

For better performance, it is recommended to create such classes outside of cssFormat method ( create once, and use their names )

http://docs.webix.com/api__html_createcss.html
http://docs.webix.com/api__html_addcss.html

#5

I am using addCellCss fx to apply css on the cell. But it is working only once in my use case css will change frequently on the given table based on some input values.

How to handle this particular case ?

#6

Sorry, but I don’t follow. You are using styling to mark a state of a cell, right ? And you have a finite set of such states, right ? So why you can’t use a finite set of css classes. The addCellCss has a pair method removeCellCss, so you can add or remove one or many classes to any cell.

#7

Is there any way I can set css in cell by using cell value. Dynamically I am setting cssFormat:mark_votes in my each column but my i am not able to reach at mark_votes. I have datatable with more than 10 column. Also I want to place hyperlink for few of the text in cell.

#8

@DavidWar please correct me, if I misunderstood the use-case, but the cssFormat has the needed parameters and it’s the best way to set dynamic styles for the cells.

Also, you can use data scheme for setting $cellCss for the data items.

Both options are described in the related docs chapter.

Adding a hyperlink is a bit different task.
To modify the cell content (and do not affect the real data item), you need to set the corresponding template for a column.