Our blazing fast Grid component built with pure JavaScript


Post by Yamo1993 »

Hi,

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?

Thanks in advance.


Post by saki »

There is https://bryntum.com/docs/grid/api/Grid/column/CheckColumn#config-checkCls config option of CheckColumn that can be used to select the checkbox and style it the way you want.

If you would only need to change the color, you can use checkCls:'b-blue' to change the color to blue, for example.


Post by Animal »

Also, each checkbox is an instance of https://www.bryntum.com/docs/gantt/api/Core/widget/Checkbox

So you can configure the editor of the column using configs from there.

Or if it's just appearance you want to change, just use CSS a described in a previous answer.

Attachments
Screenshot 2021-11-22 at 14.53.06.png
Screenshot 2021-11-22 at 14.53.06.png (143.88 KiB) Viewed 955 times

Post by Animal »

Sorry for the misinfo!

That's the widgets config in the column definition which describes what widgets go into each cell. Not editor.

https://www.bryntum.com/docs/gantt/api/Grid/column/CheckColumn#config-widgets

So you could do this to statically configure the checkboxes in the cells:

columns : [{
    type : 'checkbox',
    widgets : [{
        color : 'red'
    }]
}]...

or, if you need to change the widget based on the record use the renderer: https://www.bryntum.com/docs/gantt/api/Grid/column/WidgetColumn#config-renderer

eg

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'
             }
        }
    ]...

Post by Yamo1993 »

saki wrote: Mon Nov 22, 2021 3:55 pm

There is https://bryntum.com/docs/grid/api/Grid/column/CheckColumn#config-checkCls config option of CheckColumn that can be used to select the checkbox and style it the way you want.

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.


Post by Yamo1993 »

Animal wrote: Mon Nov 22, 2021 5:35 pm

Sorry for the misinfo!

That's the widgets config in the column definition which describes what widgets go into each cell. Not editor.

https://www.bryntum.com/docs/gantt/api/Grid/column/CheckColumn#config-widgets

So you could do this to statically configure the checkboxes in the cells:

columns : [{
    type : 'checkbox',
    widgets : [{
        color : 'red'
    }]
}]...

or, if you need to change the widget based on the record use the renderer: https://www.bryntum.com/docs/gantt/api/Grid/column/WidgetColumn#config-renderer

eg

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.


Post by alex.l »

Great to hear you solved it. Do you need in further assistance here?

All the best,
Alex


Post by Animal »

Using pure CSS is the way to go.

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.


Post by Yamo1993 »

alex.l wrote: Mon Nov 22, 2021 6:34 pm

Great to hear you solved it. Do you need in further assistance here?

No, thanks. I have another question about checkboxes though, but I will open a new topic for that :)

Thanks for your quick support!

Animal wrote: Mon Nov 22, 2021 6:35 pm

Using pure CSS is the way to go.

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!


Post Reply