Changing the color of the row selector

1 Answer 34 Views
Grid
Fred
Top achievements
Rank 1
Fred asked on 07 Sep 2022, 03:29 PM

Is there a way to change the color the grid row selector? not the entire row or a column just the row selector. I would also like to know if a tooltip can be include on the row selector as well. 

Thanks,,

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 12 Sep 2022, 08:10 AM

Hello Fred,

If you are using a GridRowIndicatorColumn, you can assign a CssClass to it

<telerik:RadGrid ID="RadGrid1" runat="server">
    <MasterTableView>
        <Columns>
            <telerik:GridRowIndicatorColumn>
                <ItemStyle CssClass="rowindicator" />
            </telerik:GridRowIndicatorColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

 

Then write a CSS style to target that cell

.RadGrid .rgMasterTable td.rowindicator {
    background-color: chocolate;
}

 

Result

 

In case you want to style the GridGroupColumn, you can simply target its rendered CSS class and write your CSS override to overrule the built-in style

/*Purple background*/
.RadGrid .rgMasterTable td.rgGroupCol {
    background-color: blueviolet !important;
}
/*White font-icons*/
.RadGrid .rgMasterTable td.rgGroupCol .rgActionButton span.rgIcon {
    color: white;
}

 

Result

 

For more details on styling and overrides, 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: 

 

Regards,
Attila Antal
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.

Tags
Grid
Asked by
Fred
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or