Kendo MVC Grid新增行添加自定义class不生效如何解决？

问题根因 #

你使用的Grid change 事件触发时机早于新增行DOM元素渲染完成的时间，执行addClass操作时对应的tr元素还没挂载到页面中，自然找不到目标元素，无法添加自定义class。

解决方案 #

方案1：短延时等待DOM渲染（简单快捷） #

给class添加操作加短延时，等行渲染完成后再执行：

function onChange(e) {
    if (e.action == "add") {
        const newRowUid = e.items[0].uid;
        // 延时50ms，可根据实际渲染速度调整时长
        setTimeout(() => {
            $(`tr[data-uid='${newRowUid}']`).addClass("red");
        }, 50);
    }
}

方案2：配合dataBound事件实现（更稳定，无延时不确定性） #

给新增数据项加临时标记，在每次Grid数据渲染完成后统一处理新增行样式：

1. 先在change事件里给新增数据打标记

function onChange(e) {
    if (e.action == "add") {
        e.items[0].isNewRow = true;
    }
}

2. 给Grid绑定dataBound事件，在事件内处理样式

function onGridDataBound(e) {
    const grid = e.sender;
    // 遍历当前页所有行
    grid.items().each(function() {
        const rowData = grid.dataItem(this);
        if (rowData.isNewRow) {
            $(this).addClass("red");
        }
    })
}

Kendo MVC Grid绑定事件示例：

@(Html.Kendo().Grid<YourModel>()
    .Name("Grid")
    .Events(ev => ev
        .Change("onChange")
        .DataBound("onGridDataBound")
    )
    // 其余配置省略
)

样式优先级优化 #

为了避免Kendo默认行样式覆盖你的自定义样式，提高选择器优先级即可：

.k-grid .k-master-row.red, 
.k-grid .k-alt.k-master-row.red {
    background-color: red;
}

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