Telerik Grid内联编辑报错：Cannot read property 'settings' of undefined

API 探路者

2026-6-21

解决Telerik Grid内联编辑嵌套表单冲突的问题

核心原因

Telerik Grid开启内联编辑时会自动生成<form>标签，而HTML规范不允许表单嵌套，当Grid被包裹在已有主表单中时，会导致DOM结构异常，进而触发Cannot read property 'settings' of undefined这类错误。

具体解决方案

1. 禁用Grid自动创建表单

通过配置Grid的编辑参数，阻止其自动生成表单，从根源避免嵌套冲突：

// ASP.NET MVC 示例
@(Html.Kendo().Grid<YourDataModel>()
    .Name("YourGrid")
    .Editable(editable => editable
        .Mode(GridEditMode.InLine)
        .EditFormSettings(settings => settings.CreateForm(false)) // 关闭自动表单生成
    )
    // 其他列、数据源配置
)

纯JS初始化Grid的写法：

$("#YourGrid").kendoGrid({
    editable: {
        mode: "inline",
        createForm: false // 禁用自动创建表单
    },
    // 其余Grid配置项
});

2. 手动处理编辑提交逻辑

禁用自动表单后，需要自定义保存按钮的事件，手动收集数据并提交：

$("#YourGrid").on("click", ".k-grid-save", function(e) {
    e.preventDefault();
    const grid = $("#YourGrid").data("kendoGrid");
    const editModel = grid.editable.options.model;

    // 自定义提交请求
    $.ajax({
        url: "/YourController/SaveData",
        type: "POST",
        data: editModel,
        success: function(res) {
            grid.dataSource.sync();
            grid.cancelEdit();
        },
        error: function(xhr) {
            alert("保存失败：" + xhr.responseText);
            grid.cancelEdit();
        }
    });
});

3. 隔离主表单的jQuery验证

如果主表单启用了jQuery验证，需排除Grid编辑区域的元素，避免验证规则干扰：

$(document).ready(function() {
    $("#MainForm").validate({
        ignore: ".k-grid-edit-cell input, .k-grid-edit-cell select" // 忽略Grid编辑单元格内的元素
    });
});