Change column background color/disable edit from outside button, in Batch Edit mode.

[Josif]

I have a simple grid running in Batch Edit mode. Need to disable column "Division" and change its color by clicking an outside button. My code gets executed but nothing changes. This column's color gets set by applying custom CSS using 
background-color: white !important;. My code assigns a different CSS with another color.

ASPX:
<telerik:GridBoundColumn DataField="Division" HeaderText="Division" UniqueName="Division"></telerik:GridBoundColumn>

VB cb:
    Protected Sub btnApprove_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnApprove.Click
        Dim Item As GridDataItem
        For Each Item In RadGrid1.MasterTableView.Items
            If (Item.IsDataBound) Then
                Dim col As GridBoundColumn = CType(RadGrid1.MasterTableView.GetColumn("Division"), GridBoundColumn)
                col.ItemStyle.CssClass = "customGriglinesGray"
                col.ReadOnly = True
            End If
        Next
    End Sub

[Attila Antal]

Hello Josif,

If you set the "col.ItemStyle.CssClass" property to a column, all rows will be affected, regardless if the Item is DataBound or not. There is no need to loop through the Grid's items and set the CSS class that many times, It's enough to do it only once.

Example.

Protected Sub btnApprove_Click(sender As Object, e As EventArgs)
    Dim col As GridBoundColumn = CType(RadGrid1.MasterTableView.GetColumn("Division"), GridBoundColumn)
    col.ItemStyle.CssClass = "customGriglinesGray"
    col.ReadOnly = True
End Sub

 

For changing the background color, you will need to create a CSS selector targeting the TD elements with the custom class you have injected and override the built-in style. Try to avoid using the "!important" keyword, instead make the CSS selector stronger.

Example

<style>
    .RadGrid .rgMasterTable tbody td.customGriglinesGray {
        background-color: white;
    }
</style>

 

For more details, 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. 

• Inspect the Generated HTML of a Control
• See the Applied Styles

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: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;
• CSS !important: Don’t Use It. Do This Instead

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

• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

Regards,
Attila Antal
Progress Telerik