Datatable cssFormat - Set formatting using value from another column in row.

I have been successful at implementing the cell formatting using the cssFormat technique outlined at this page: https://docs.webix.com/datatable__styling.html

I have used the "value" passed in for the current column to do the formatting. But I have a situation where I need to set the formatting of a column based on the value of another column. For instance. My data is:

Film Title, Votes
Film A, 100000
Film B, 50000
Film C, 25000

If the votes are greater then 50000 I would like to highlight the "Film Title" column. Thus I need to build a cssFormat script that will look at the value of the "Votes" column vs the "Film Title" column.

As a side note, the example on "Applying cssFormat method" section of this page https://docs.webix.com/datatable__styling.html looks incorrect.

In the example on that page, it shows an image where the "Release" column is highlighted, but the cssFormat command is actually on the "Votes" column.

function mark_votes(value, config){
if (value > 400000)
return { "text-align":"right" };
};

webix.ui({
view:"datatable",
columns:[
{ id:"title", header:"Film title"},
{ id:"votes", header:"Votes", cssFormat:mark_votes }
],
});

Comments

  • cssFormat receives cell's value, row object, row id, column id as arguments.
    also this is column config.
    you can get table instance as $$(this.node)
    https://docs.webix.com/datatable__styling.html#cells

  • Thanks for the reply. I see now. All of the row elements are in the "config" object that is passed to the function. Super simple. Thanks for your help!

    Here is an example for others:
    //object css
    function mark_votes(value, config){
    year = config.year;
    if (year = 1994)
    return { "text-align":"center" };
    }

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!