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

1 Answer 123 Views
Ajax Button Grid
Josif
Top achievements
Rank 1
Josif asked on 08 Dec 2022, 05:28 PM
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

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 13 Dec 2022, 03:37 PM

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. 

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

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