Style che select row checkbox column

[Maurizio]

Hi folks,

the question is: how I can modify the style of the select row checkbox inside kendo-grid?

I use the kendo-grid for AngularUI.

I have added the kendo-grid-checkbox-column for selecting multiple row. Using the <ng-template kendoGridHeaderTemplate> I'm able to change the style of the header check box.

I need to change the style of the row checkbox. I have tried to verride the css class (using <style> on the component html or adding class to the component css) .k-checkbox

new class:

.k-checkbox {
    border: 1px solid #474747 !important; 
    width:24px !important; 
    height: 24px !important;
    border-radius: 8px !important;
  }

Picture:

[Yanmario]

Hi Maurizio,

I believe the reason the styles aren't being applied is that the ViewEncapsulation hasn't been set to None or the styles are not in the global style sheet. More information can be found in the following knowledge base article:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/custom-styles/

I also want to mention that the selector is correct, but it will also target all Kendo checkboxes present on the page. Here is an example where the selector is targeting the Grid component table checkboxes:

https://stackblitz.com/edit/angular-sgzdnj?file=src%2Fapp%2Fapp.component.ts

       kendo-grid .k-table-td .k-checkbox {
                border: 1px solid #474747 !important; 
                width:24px !important; 
                height: 24px !important;
                border-radius: 8px !important;
        }

I hope this helps.

Regards,
Yanmario
Progress Telerik