Styling the Detail Row Template component?

[Han]

Hello,

I'm trying to style the Detail Row Template, but I can only style inside the component.  What I'm trying to do is style outside the component, but inside the dropdown (blue area in the screenshot).  And ideally I want to have that color match the parent row's background color.

Following screenshot will explain everything.  Thanks!!  Note:  I was only able to style this area in the screenshot if I inject into .k-detail-row in Chrome.  I don't know where to put it in Angular code because it seems to be between the parent and child components.

[Zornitsa]

Hi Han,

Thank you for the provided screenshot.

As far as I understand, when expanding a master row of the Grid component, your desire is to style the background of this row and its corresponding detail row with the same color, is that correct? 

If that is the case, I would suggest setting the desired background color of the elements using the following CSS selectors:

.k-detail-row{
   background-color: #add8e6;
}

.k-table-row:has(.k-svg-i-minus){
   background-color: #add8e6;
}

.k-alt.k-table-alt-row:has(.k-svg-i-minus){
   background-color: #add8e6;
}

.k-table-tbody.k-detail-row:hover{
   background-color: #add8e6;
}

.k-grid.k-table-tbody > .k-table-row:not(.k-detail-row):has(.k-svg-i-minus):hover{
   background-color: #add8e6;
}

As you can see in the above code snippet, the background color of the master rows is handled by the ':has()' CSS pseudo-class. We are utilizing it to check if the master rows contain an element with a '.k-svg-minus' class since this indicates that a row has been expanded.

In addition, since custom CSS styles are used, the encapsulation property for the specific component must be set to 'ViewEncapsulation.None' for the styles to take effect. Documentation about customizing the styles of our components:

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

https://www.telerik.com/kendo-angular-ui/components/styling/

https://www.telerik.com/design-system/docs/

Below is a StackBlitz example, in which you can observe the suggested approach:

• https://stackblitz.com/edit/angular-jsiglr 

To shorten the above styling, the developer could use the '!important' flag and leave only the first two declarations from the above code snippet. However, please note that this approach is generally considered a bad practice and should be avoided in some cases:

.k-detail-row{
   background-color: #add8e6!important;
}

.k-table-row:has(.k-svg-i-minus){
   background-color: #add8e6!important;
}

Here is a StackBlitz example, demonstrating the second approach as well:

• https://stackblitz.com/edit/angular-txm7pl 

I hope that the provided information is helpful. I remain at your disposal in case any additional questions arise.

Regards,
Zornitsa
Progress Telerik