如何为TelerikGrid中ColorControl为'F'的行添加CSS类

方法一：直接通过Grid的RowClass属性实现（推荐） #

Telerik Grid自带RowClass参数，可直接根据行数据判断并添加CSS类，无需额外按钮或复杂逻辑。

实现步骤： #

1. 先定义要添加的CSS样式：

<style>
    .highlight-row {
        background-color: #ffebee; /* 示例红色背景，可按需自定义 */
    }
</style>

2. 修改Grid组件，添加RowClass属性关联判断方法：

<TelerikGrid Data="@GridDataSource"
             EditMode="@Telerik.Blazor.GridEditMode.Incell"
             @ref="Grid"
             SelectionMode="@Telerik.Blazor.GridSelectionMode.Multiple"
             RowClass="@GetRowClass"> <!-- 新增该行绑定行类判断逻辑 -->
    <GridToolBar>
        <!-- 若无需按钮触发，可直接移除该按钮 -->
        <TelerikButton OnClick="@Test">Click me</TelerikButton>
    </GridToolBar>
    <GridColumns>
        <GridColumn Field="@nameof(TransactionsRO.ColorControl)" Width="50px"></GridColumn>
        <GridCheckboxColumn CheckBoxOnlySelection="true" Width="50px" />
    </GridColumns>
</TelerikGrid>

3. 在@code块中添加行类判断方法：

@code {
    [Parameter]
    public TransactionsCollection GridDataSource { get; set; }

    public TelerikGrid<TransactionsRO> Grid;

    // 根据行数据判断是否添加样式类
    private string GetRowClass(TransactionsRO row)
    {
        return row.ColorControl == "F" ? "highlight-row" : string.Empty;
    }
}

这种方式会在Grid渲染时自动为符合条件的行添加样式，无需手动触发。

方法二：通过按钮触发更新行样式（匹配你的Test方法需求） #

如果确实需要通过按钮点击来触发样式添加，可按以下方式修正代码：

修正后的完整代码： #

<TelerikGrid Data="@GridDataSource"
             EditMode="@Telerik.Blazor.GridEditMode.Incell"
             @ref="Grid"
             SelectionMode="@Telerik.Blazor.GridSelectionMode.Multiple"
             RowClass="@GetRowClass">
    <GridToolBar>
        <!-- 注意OnClick绑定不要加括号，否则页面渲染时会立即执行 -->
        <TelerikButton OnClick="@Test">Click me</TelerikButton>
    </GridToolBar>
    <GridColumns>
        <GridColumn Field="@nameof(TransactionsRO.ColorControl)" Width="50px"></GridColumn>
        <GridCheckboxColumn CheckBoxOnlySelection="true" Width="50px" />
    </GridColumns>
</TelerikGrid>

<style>
    .highlight-row {
        background-color: #ffebee;
    }
</style>

@code {
    [Parameter]
    public TransactionsCollection GridDataSource { get; set; }

    public TelerikGrid<TransactionsRO> Grid;
    // 用集合存储需要高亮的行对象
    private HashSet<TransactionsRO> _highlightedRows = new HashSet<TransactionsRO>();

    // 修正Test方法：无需返回EventCallback，直接写void逻辑
    private void Test()
    {
        _highlightedRows.Clear();
        var gridRows = Grid.Data.ToList();
        foreach (TransactionsRO row in gridRows)
        {
            if (row.ColorControl == "F")
            {
                _highlightedRows.Add(row);
            }
        }
        StateHasChanged(); // 通知组件重新渲染，应用新样式
    }

    private string GetRowClass(TransactionsRO row)
    {
        return _highlightedRows.Contains(row) ? "highlight-row" : string.Empty;
    }
}

关键修正点： #

• 原Test方法返回EventCallback是错误的，Blazor按钮的OnClick绑定方法应为void或Task类型。
• 按钮OnClick绑定不要加括号（@Test而非@Test()），否则页面渲染时会立即执行方法。
• 用行对象集合跟踪高亮行（若TransactionsRO有唯一ID，用ID跟踪更稳妥），而非行索引，避免引用问题。
• 通过StateHasChanged()通知组件重新渲染，确保样式生效。

关于你原代码中@if语句的问题 #

你原本尝试在列内用@if判断行数据的写法不正确，若要给列内元素加样式，可使用列模板结合上下文参数：

<GridColumn Field="@nameof(TransactionsRO.ColorControl)" Width="50px">
    <Template Context="row">
        <span class="@(row.ColorControl == "F" ? "highlight-text" : "")">@row.ColorControl</span>
    </Template>
</GridColumn>

但这仅针对列内元素，整行加样式仍推荐使用RowClass方式。

内容的提问来源于stack exchange，提问作者BlazorWolf