How can I change the style of the expand/collapse indent columns of an AJAX RadGrid?

1 Answer 53 Views
Grid Styling
Craig
Top achievements
Rank 1
Craig asked on 06 Apr 2022, 08:23 PM | edited on 06 Apr 2022, 08:27 PM

I can change the backcolor of the actual expand/collapse control (Red in the example below), but I can't seem to figure out how to change the color of the extended area under it, when the detail tables are expanded.


In the attached image, I have indicated the area that I am trying to also change to red.

Can anyone explain how to do this?
The goal is to have each of the 4 levels a slightly darker grey than the previous.

 

example

1 Answer, 1 is accepted

Sort by
1
Accepted
Doncho
Telerik team
answered on 11 Apr 2022, 12:14 PM

Hi Craig and Betty,

One approach I would suggest is to use the CssClass property of each of the nested GridTableViews to assign a unique class name for each level of nested table views levels and use it as an additional CSS selector when styling:

<telerik:RadGrid ID="RadGrid1" runat="server" ...>
    <MasterTableView ...>
        <DetailTables>
            <telerik:GridTableView CssClass="level2">
                <DetailTables>
                    <telerik:GridTableView CssClass="level3">
                        <DetailTables>
                            <telerik:GridTableView>
                            </telerik:GridTableView>
                        </DetailTables>
                    </telerik:GridTableView>
                </DetailTables>
            </telerik:GridTableView>
        </DetailTables>
Then you can use some custom CSS based on the rendered Html structure to style the desired elements:
.RadGrid .rgMasterTable > tbody > tr > .rgExpandCol {
    background-image: none;
    background-color: red;
    border-bottom-color: red;
}

.RadGrid .rgDetailTable.level2 > tbody > tr > .rgExpandCol {
    background-image: none;
    background-color: blue;
    border-bottom-color: blue;
}
.RadGrid .rgDetailTable.level3 > tbody > tr > .rgExpandCol {
    background-image: none;
    background-color: green;
    border-bottom-color: green;
}

 

To narrow down appearance issues with Telerik AJAX controls, I would suggest inspecting the HTML elements and the styles applied to them. You can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

I hope you will find this information helpful.

Kind regards,
Doncho
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Craig
Top achievements
Rank 1
commented on 12 Apr 2022, 08:41 PM

Perfect. Thank you!!
Tags
Grid Styling
Asked by
Craig
Top achievements
Rank 1
Answers by
Doncho
Telerik team
Share this question
or