Wrap hierachy in color with padding at bottom

[Michael]

     Is it possible to have it highlight the 1st level a color, the side and then add padding to to wrap it in the same   Similar to this example

https://cdn.shopify.com/s/files/1/0035/7279/3459/files/microbit-if-statement-for-robots-button-is-pressed_large.png?v=1530304913

 

The blue being the 1st level and the green being the 2nd level.

 

Attached a grid we are currently using with the blue square where we want it to be a blue background.

 

[Marin Bratanov]

Hello Michael,

You can inspect the rendered classes on the respective elements and devise CSS rules to provide the desired coloring. The following blog post can help you get started with this: https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools#see-the-applied-styles.

For your convenience, I created a basic example on top of our declarative relations demo. Below you will find attached the results of the rules below. You can extend/change them to match your needs and also you can use the CssClass of a concrete table view to set a custom class name to cascade through. In the ItemDataBound event you can also easily set classes to entire rows if you need that.

/*change expand cell for master table view*/
.RadGrid .rgMasterTable tbody .rgExpandCol {
    background: red;
}

/*restore original color for non-expanded rows*/
div.RadGrid .rgMasterTable .rgRow .rgExpandCol,
div.RadGrid .rgMasterTable .rgAltRow .rgExpandCol {
    background: #e6e6e6;
}

/*change expand cell for detail table view*/
.RadGrid .rgDetailTable tbody .rgExpandCol {
    background: blue;
}

/*restore original color for non-expanded rows*/
div.RadGrid .rgDetailTable .rgRow .rgExpandCol,
div.RadGrid .rgDetailTable .rgAltRow .rgExpandCol {
    background: #e6e6e6;
}

/*margin to detail tables*/
.rgDetailTable {
    margin-bottom: 50px;
}

Regards,
Marin Bratanov
Progress Telerik