Wrap hierachy in color with padding at bottom

2 posts, 0 answers
  1. Michael
    Michael avatar
    6 posts
    Member since:
    Dec 2016

    Posted 10 Dec 2018 Link to this post

         Is it possible to have it highlight the 1st level a color, the side and then add padding to bottom to wrap it in the same color.  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.

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4655 posts

    Posted 12 Dec 2018 Link to this post

    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.
Back to Top