如何在Kendo Grid更新记录时获取下拉框选中值并保存ID

我来帮你搞定这个问题——你当前的核心问题是下拉框的绑定没有正确关联到Grid模型的StudnetInterest字段，导致提交时无法传递选中的ID值。下面是具体的修复步骤和完整的修正代码：

关键问题分析与修复 #

1. 修正下拉框的数据绑定 #

你在interestsDropdown编辑器函数里，错误地把data-bind设置为value:Id，这会绑定到下拉框组件自身的ID，而非Grid模型对应的StudnetInterest字段。需要改成绑定到当前列的字段：

$("<input required name='" + options.field + "' id='dropintrest'/>")
  .appendTo(container)
  .attr('data-bind', 'value:' + options.field) // 绑定到Grid模型的对应字段
  .kendoDropDownList({
    autoBind: false,
    dataTextField:"InterestName",
    dataValueField:"Id",
    dataSource: dropDownDataSource,
  });

2. 移除多余的手动获取逻辑 #

你添加的onchange='drop(this)'事件和drop函数完全没必要，Kendo的MVVM绑定机制会自动将下拉框选中的dataValueField值同步到Grid的模型中，无需手动获取。

3. 优化字段类型与列配置 #

• 把StudnetInterest的字段类型改成number，因为ID通常是数值类型，能更好匹配下拉框返回的ID值，避免类型转换问题。
• 移除列配置里多余的values: interestsDropdown属性，这会和自定义编辑器冲突。

完整修正后的代码 #

<html>
<head>
    <title></title>
</head>
<body>
    <div id="grid-container"></div>
    @*Scripts*@
    <script type="text/javascript">
        $(document).ready(function () {
            var gridDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/KendoGrid/GetStudents",
                        dataType: "json"
                    },
                    update: {
                        url: "/KendoGrid/CreateOrUpdate",
                        dataType: "json"
                    },
                    create: {
                        url: "/KendoGrid/CreateOrUpdate",
                        dataType: "json"
                    },
                    destroy: {
                        url: "/KendoGrid/DeleteDetails",
                        dataType: "json"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options) {
                            return options;
                        }
                    }
                },
                pageSize: 5,
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: { editable: false, nullable: true },
                            Name: { editable: false, validation: { required: true } },
                            FatherName: { type: "text", validation: { required: true, min: 1 } },
                            DateOfBirth: { type: "date" },
                            Address: { type: "text", validation: { min: 0, required: true } },
                            Email: { type: "email", validation: { min: 0, required: true } },
                            Phone: { type: "text", validation: { min: 0, required: true } },
                            StudnetInterest: { type: "number", validation: { min: 0, required: true } }
                        }
                    },
                    parse: function (data) {
                        if (!data.success && typeof data.success !== 'undefined') {
                            //notifier.logixNotifier("notifyError", data.message);
                            gridDataSource.read();
                        }
                        if (data.success) {
                            //notifier.logixNotifier("notifySuccess", data.message);
                            gridDataSource.read();
                        }
                        return data;
                    }
                }
            });

            $("#grid-container").kendoGrid({
                dataSource: gridDataSource,
                height: 550,
                groupable: true,
                sortable: true,
                toolbar: ["create"],
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5,
                },
                columns: [
                    { field: "Name", title: "Name", editable: false },
                    { field: "FatherName", title: "Father Name", },
                    { field: "DateOfBirth", title: "Date Of Birth", format: "{0:MM/dd/yyyy}" },
                    { field: "Address", title: "Address", },
                    { field: "Email", title: "Email", },
                    { field: "Phone", title: "Phone", attributes: { hideMe: true } },
                    { field: "StudnetInterest", title: "Student Interest", editor: interestsDropdown },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
                ],
                editable: "popup"
            });
        });

        @*drop down Data Source*@
        var dropDownDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    dataType: "json",
                    url: "/KendoGrid/GetInterest",
                },
            }
        });

        function interestsDropdown(container, options) {
            $("<input required name='" + options.field + "' id='dropintrest'/>")
                .appendTo(container)
                .attr('data-bind', 'value:' + options.field)
                .kendoDropDownList({
                    autoBind: false,
                    dataTextField:"InterestName",
                    dataValueField:"Id",
                    dataSource: dropDownDataSource,
                });
        }
    </script>
</body>
</html>

现在你再测试更新或创建操作时，StudnetInterest字段会自动携带下拉框选中的ID值提交到后端接口了。

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