Kendo Grid Group Styling

[Bill]

     Good morning, I am trying to add some Styling to our Kendo Grid, and it is around the Grouping we have applied.

Attached is what I am trying to do, but I can't seem to find a style to work.  Is there anyway to achieve this desired style.

 

Thanks,

Bill

[Dimiter Topalov]

Hi Bill,

You can overwrite the built-in Grid styling by targeting the respective selectors and providing the desired CSS rules, e.g.:

styles: [`
    >>> .k-grid .k-grouping-row td {
      background-color: blue;
      color: white;
    }

    >>> .k-grid .k-grouping-row .k-icon {
      color: white;
    }

    >>> .k-grid td.k-group-cell {
      background-color: darkgrey;
    }
  `]

https://stackblitz.com/edit/angular-fvrztr-pzzukc?file=app/app.component.ts

The most straight-forward approach for finding the required CSS selectors is to inspect the elements that need to be customized in the browser developer tools (F12) and check the respective selectors and currently applied rules, e.g.:



Note that to "penetrate" the Grid component's default encapsulation, you will need to either provide the custom styles globally, set ViewEncapsulation of the Host component to None, or use the shadow-piercing descendant combinators:

https://angular.io/guide/component-styles#view-encapsulation

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Bill]

So that is typically how I do it, the only problem is that we are grouping on two different columns, and we want the two grouped columns to have different colors.

[Dimiter Topalov]

Hi Bill,

You can customize the styling further by providing a selector that will target TD elements in ".k-grouping-row" and another one for TD elements that are immediately after a ".k-group-cell" element (for the second-level group headers):

[`

    >>> .k-grid .k-grouping-row .k-icon,
    >>> .k-grid .k-grouping-row td {
      color: white;
    }

    >>> .k-grid .k-grouping-row td { background-color: blue; }
    >>> .k-grid .k-grouping-row .k-group-cell+td { background-color: green; }

    >>> .k-grid td.k-group-cell {
      background-color: darkgrey;
    }
  `]

https://stackblitz.com/edit/angular-fvrztr-askbzg?file=app/app.component.ts

Regards,
Dimiter Topalov
Progress Telerik

[Mouton]

I put a split button inside a command cell in a kendo grid.

The drop down of the split button didn't overflow the cell and was hidden.

This post helped me to fix this issue using the following css:

::ng-deep .k-command-cell {
            overflow: visible !important;
        }

 

Thank you!!

 

 

 

 

[Vinay Kumar]

Hi Bill

Along with Styling the cell (Like adding color to the cell), I need to group the rows and add pagination. Rows may be around 1000. Can You solve it?

I had done it. But, there was a problem with that. I lost the pagination. But, styles was applied around 100 records and remaining rows I can not see the pages as it lost the pagination.

 

Thank you

Vinay

[Dimiter Topalov]

Hello Vinay,

Can you please explain the scenario in further details? Does it involve a Grid with both grouping and paging? What does "it lost the pagination" mean?

I prepared a simple example of a Grid with both grouping and paging where all group rows are highlighted:

https://stackblitz.com/edit/angular-ls9o27-8a3ojv?file=app/app.component.ts

Please inspect it, and apply the necessary adjustments to your implementation.

Regards,
Dimiter Topalov
Progress Telerik