add style

1)can I set conditional background-color directly or by a easy way?
$$("ssheet").conditions.add(3,6,">",100,"{background:red}");

2)how can I set font's color of some columns by a easy way?
by setRangeStyle or add a className(with specified style)

3)how to add tooltips(=value) for all the cells and headers?

thank you so much!

Tagged:

Comments

  • edited June 4

    Hi @zzhang

    can I set conditional background-color directly or by a easy way?

    You can try to use webix.html.createCss.

    Example: https://snippet.webix.com/r07m2wxs

    how can I set font's color of some columns by a easy way?

    It's need to add style via addStyle() and set it to the column via setRangeStyle()

    Check this snippet: https://snippet.webix.com/lh7ma639

    how to add tooltips(=value) for all the cells and headers?

    For header of the inner datatable you need to iterate through columns and update tooltips. To add tooltips for newly created columns you need to attach onChange event.
    For cells you need to use define({tooltips:true}).

    Example: https://snippet.webix.com/4cm79oqk

  • edited June 13

    hi Dima_S,
    about how to add tooltips for column headers,I think it is better with:

    on:{
        onColumnInit: (col) => {
          //add tooltip for column headers
          col.header.tooltip = true;
        }
      }
    

    please check https://snippet.webix.com/jn2pu0yt

  • @zzhang

    Yes, you are right, it's better to use onColumnInit event

  • about add css for cells,I wonder which way is best:

    my needs: set different styles(color/text-align/font-family/...) for different columns or rows.

    1):with array styles[] when init sheet
    like https://snippet.webix.com/rnj0haca

    2):with function addStyle such as:
    https://snippet.webix.com/h2iba8d8

    3)or could I add className for cells? then i can add whatever styles I need

    thanks a lot. have a good day!

  • edited June 14

    about conditional background color
    1. in this demo, the background color should be blue(>10)
    https://snippet.webix.com/rbukp6zq
    but the result is yellow, seems like the condition2 is replaced with condition3.Then the condition2 is gone.
    Do I need to add conditions by order? or this is a bug?

    2.And why doesn't support '>=' or '<=' ,it is troublesome to add twice.

  • @zzhang

    about add css for cells,I wonder which way is best

    It depends on whether the number of rows / columns will change. If the number does not change use first variant, otherwise second.

    or could I add className for cells? then i can add whatever styles I need

    You can use datatable addCellCss() method.

    about conditional background color

    in this demo, the background color should be blue

    There are conflicting conditions in this example (>1, >5, >10). Therefore, the last matching is used (10 > 5).

    Check the improved example: https://snippet.webix.com/wl5dqnyu

    And why doesn't support '>=' or '<=' ,it is troublesome to add twice.

    Thanks for the suggestion, we will consider adding these parameters.

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!

In this Discussion