如何让Kendo UI Grid加载时选中第一行最后一列的单选按钮

云原生阿岚

2026-7-21

Kendo Grid加载完成后选中第一行最后一列单选按钮的实现方案

1. 确认Grid的`dataBound`事件绑定

先检查你的ASP.NET MVC Grid配置，确保已经将dataBound事件绑定到OnGridBound函数，示例配置如下：

@(Html.Kendo().Grid<YourModelType>()
    .Name("targetGrid")
    .Columns(columns =>
    {
        // 其他列定义
        columns.Bound(m => m.RadioValue).ClientTemplate("<input type='radio' name='gridRadioGroup' value='#= RadioValue #' />");
        // 这是最后一列的单选按钮模板示例
    })
    .Events(e => e.DataBound("OnGridBound"))
    // 数据源、分页等其他配置
)

2. 完善`OnGridBound`函数逻辑

在你的JavaScript代码中，修改OnGridBound函数，实现选中目标单选按钮的逻辑：

function OnGridBound() {
    // 获取Grid实例
    const grid = $("#targetGrid").data("kendoGrid");
    // 检查当前页是否有数据
    if (grid.dataSource.view().length === 0) return;
    
    // 获取第一行DOM元素
    const firstRow = grid.tbody.find("tr:first");
    // 定位该行最后一列的单选按钮
    const targetRadio = firstRow.find("td:last input[type='radio']");
    
    // 找到元素则设置选中状态
    if (targetRadio.length) {
        targetRadio.prop("checked", true);
        // 若需要触发单选按钮的change事件，取消下面注释
        // targetRadio.trigger("change");
    }
}