I would like to use a custom style for the checkbox in the CheckColumn instead of the one that is provided by default.
I tried to return a JSX tag in the cell renderer function with a custom-made checkbox component, but that didn't work. It simply added an extra checkbox to the cell.
The only working solution so far has been to access each DOM element of the checkboxes through the CheckColumn and add a new CSS class to them.
What is the preferred way to apply custom style to grid checkboxes?
If you would only need to change the color, you can use checkCls:'b-blue' to change the color to blue, for example.
Thanks, this solves the problem with the checkboxes in every cell under the column header.
However, I am also using the property "showCheckAll" which adds a header checkbox, and the header checkbox is not receiving the classname. So the header checkbox is not turned into blue in this case.
columns : [
{
type: 'check',
field: 'completed',
// In the column renderer, we get access to the record and column widgets
renderer({ record, widgets }) {
cont { priority } = record;
// Make checkbox reflect priority of event
widgets[0].color = priority > 2 ? 'red' : priority > 1 ? 'amber' : 'green'
}
}
]...
Thanks for the tip about widgets, good to know. I am currently using the renderer for hiding certain checkboxes. The problem with the header checkbox which I mentioned in the previous post still remains though. Neither the widgets config nor the renderer is affecting the header checkbox.
My solution was to simply override the default checkbox styling with pure CSS.
The column header element which contains the "Check all" checkbox gets the special class b-check-header-with-checkbox to allow you to just target it exactly.
The column header element which contains the "Check all" checkbox gets the special class b-check-header-with-checkbox to allow you to just target it exactly.
Yes, that's the one I found and targeted. It worked like a breeze Thanks!