Kendo Grid InCell编辑模式下复选框异常问题求助

我来帮你逐个解决这两个问题，顺便分析下InCell编辑模式带来的影响：

问题1：页面加载时CheckName为true，但复选框未选中 #

原因分析： #

1. 复选框ID重复：你给所有行的复选框都设置了同一个id="CheckNameid"，DOM中ID必须唯一，这会导致浏览器无法正确识别每一行的复选框，渲染状态时出现混乱。
2. 模板中checked属性的引号问题：Razor语法下，你的模板字符串里的引号转义不正确，可能导致checked='checked'没有被正确解析。
3. InCell编辑模式的干扰：当列开启InCell编辑时，单元格在非编辑状态显示模板，编辑状态会替换为Kendo默认的布尔值编辑器（也是复选框），如果模板和编辑器的状态不同步，就会出现显示异常。

解决方案： #

• 给每个复选框设置唯一ID：用行的Id拼接，比如id='CheckNameid_#= Id #'，确保每一行的复选框都有独立标识。
• 修正模板中的checked属性写法：在Razor里需要正确转义引号，改成#= CheckName ? 'checked=\"checked\"' : '' #。
• 可选：如果不需要对该列使用InCell编辑，直接给列添加.Editable(false)，这样单元格不会进入编辑状态，一直显示你自定义的复选框，避免状态同步问题。

问题2：点击新复选框时，之前选中的会自动取消 #

原因分析： #

1. ID重复导致选择器错误：你的setCheckName函数里用$('#CheckNameId')获取复选框，但因为所有复选框ID相同，这个选择器只会找到第一行的复选框，导致你点击任何其他行的复选框，操作的都是第一行的元素，看起来像是“取消了之前的选中”。
2. 未传递行标识：函数里没有把当前行的Id传给后台，后台无法知道要更新哪条数据，同时也无法同步Grid的数据源状态。

解决方案： #

• 修改setCheckName函数，通过this传递当前点击的复选框，同时传入行的Id，确保操作的是当前行的元素：

function setCheckName(checkbox, rowId) {
    var isChecked = checkbox.checked;
    
    // 先同步Grid数据源，避免界面和数据不一致
    var grid = $("#mygrid").data("kendoGrid");
    var dataItem = grid.dataSource.get(rowId);
    dataItem.set("CheckName", isChecked);
    
    // 再调用后台接口更新数据
    $.ajax({
        type: "POST",
        url: "@Url.Action("setCheckName")",
        dataType: "json",
        data: { 
            CheckName: isChecked,
            Id: rowId // 必须传递行ID，后台才能定位到要更新的记录
        }
    });
}

• 同时更新模板中的onclick事件，传递当前元素和行ID：onclick='setCheckName(this, #= Id #)'。

修改后的完整Grid代码 #

@(Html.Kendo().Grid<myViewModel>() 
    .Name("mygrid") 
    .Filterable() 
    .Sortable() 
    .Editable(e => e.Mode(GridEditMode.InCell)) 
    .Columns(columns => { 
        columns.Bound(c => c.Id).Visible(false); 
        columns.Bound(c => c.CheckName)
            .Editable(false) // 如果不需要该列的InCell编辑，添加此行
            .ClientTemplate("<input type='checkbox' #= CheckName ? 'checked=\"checked\"' : '' # onclick='setCheckName(this, #= Id #)' id='CheckNameid_#= Id #' />"); 
        columns.Bound(c => c.Name); 
    }) 
    .DataSource(ds => ds 
        .Ajax() 
        .Read(r => r.Action("ReadData", "MyContr")) 
        .Update(u => u.Action("UpdateData", "MyContr")) 
        .AutoSync(true) 
        .Model(model => { 
            model.Id(m => m.Id); 
            model.Field(m => m.CheckName); 
            model.Field(m => m.Name); 
        }) 
    ) 
)

额外注意事项 #

1. 确保后台返回的CheckName字段是布尔类型（true/false），而不是字符串（"true"/"false"），否则模板中的判断逻辑会失效。
2. 如果保留该列的InCell编辑，需要确保模板的状态和Kendo默认编辑器的状态同步，建议通过数据源的set方法更新数据，避免界面和数据源不一致。
3. 后台的setCheckName接口需要接收Id和CheckName两个参数，才能正确更新对应的数据记录。

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