How to style Webix checkbox inside data table to modify the size and color

Hi,

I have a data table with checkboxes in the first column with template:"{common.checkbox()}"

I changed Webix style with the one created using Webix Skin builder an orange based one. But the common.checkbox() gave the same blue color checkbox.

How can I change common.checkbox() style? Basically I would like to change the background color and size of the checkbox.

Thanks
Basanth

Hello, @Bachu

To solve the issue, you should create a Custom Checkbox.
Here is the snippet: Code Snippet
Please, pay attention to the ‘webix_table_checkbox’ class makes an arbitrary HTML element behave as a checkbox. So don’t forget to add ‘webix_table_checkbox’ to the class attribute among other classes.
It’s also important to set checkboxRefresh:true

Thanks for pointing rightly to custom checkbox. It worked fine for me!

Few observations after making the changes suggested:

  • Now all row checkboxes are styled as per my need, header master checkbox is still in blue style. How can I add template for master checkbox?
  • How can I get three state checkbox as master checkbox so that,
    → When all row checkboxes are selected master checkbox also gets selected.
    → When one or more row checkboxes are unselected (but not all) need to checkbox in intermediate state [-]
    → When none of the row checkboxes selected master checkboxes goes unselected.
    Updated snippet with master checkbox:
    Code Snippet

Thanks
Basanth

@AlenaLisava I missed mentioning :smile: