This is a migrated thread and some comments may be shown as answers.
Wrap hierachy in color with padding at bottom
1 Answer 6 Views
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 10 Dec 2018, 07:43 PM

     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.

 

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 12 Dec 2018, 08:24 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or