如何在Kendo Grid可编辑弹出行中创建带选中项的服务器数据源下拉框

我来帮你搞定这个Kendo Grid编辑弹框里下拉框无法默认选中的问题！这个坑我之前也踩过，大多是因为下拉框的字段绑定或者数据源配置没对齐导致的，咱们一步步来修复：

核心问题分析 #

你的下拉框能渲染选项但不选中，本质是Kendo DropDownList无法匹配Grid行数据的目标字段和下拉选项的value值，要么是字段配置错了，要么是数据类型不匹配。结合你提供的分类JSON数据，咱们直接上解决方案：

完整修复代码示例 #

$(document).ready(function() {
    // 初始化分类数据源（你提供的JSON数据）
    const categoryDataSource = new kendo.data.DataSource({
        data: [
            { "id": 1, "parentId": 0, "name": "Gowna1" },
            { "id": 2, "parentId": 1, "name": "Podkat1" },
            { "id": 6, "parentId": 0, "name": "Gowna2" },
            { "id": 7, "parentId": 6, "name": "podkategoria2" },
            { "id": 8, "parentId": 1, "name": "podkategoria3" }
        ],
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    parentId: { type: "number" },
                    name: { type: "string" }
                }
            }
        }
    });

    // 初始化Kendo Grid
    $("#grid").kendoGrid({
        dataSource: {
            // 示例Grid行数据（假设你的业务数据里有parentId字段）
            data: [
                { id: 1001, productName: "Test Product 1", parentId: 2 },
                { id: 1002, productName: "Test Product 2", parentId: 7 }
            ],
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { type: "number" },
                        productName: { type: "string" },
                        parentId: { type: "number" } // 这里类型必须和分类数据源的id一致！
                    }
                }
            }
        },
        editable: "popup", // 弹框编辑模式
        columns: [
            { field: "productName", title: "Product Name" },
            {
                field: "parentId",
                title: "Parent Category",
                // 自定义编辑模板：渲染下拉框
                editor: function(container, options) {
                    $('<input required data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            dataSource: categoryDataSource,
                            valueField: "id", // 关键：下拉选项的value绑定分类的id
                            textField: "name", // 下拉选项显示的文本是分类名称
                            optionLabel: "Select a category..."
                        });
                },
                // 自定义显示模板：在Grid视图中显示分类名称而非id
                template: function(dataItem) {
                    const matchedCategory = categoryDataSource.get(dataItem.parentId);
                    return matchedCategory ? matchedCategory.name : "Unassigned";
                }
            },
            { command: "edit", title: "Edit", width: "120px" }
        ]
    });
});

关键修复点说明 #

1. 字段绑定对齐

   • DropDownList的valueField设为id（分类数据的唯一标识），textField设为name（显示用的名称）
   • 编辑模板中通过data-bind="value:' + options.field + '"把下拉框的value和Grid行数据的parentId字段绑定，这样编辑时会自动读取现有值并匹配选项

2. 数据类型一致

   • 确保Grid数据源的parentId字段类型和分类数据源的id类型完全一致（都是number），如果一个是字符串一个是数字，Kendo会判定为不匹配

3. 可选优化：显示模板

   • 新增的template配置可以让Grid视图中显示分类名称而非原始的id，提升用户体验

额外排查建议 #

如果还是无法选中，检查这两点：

• 确认Grid行数据中的parentId值确实存在于分类数据源的id列表中（比如如果行数据的parentId是0，而分类里没有id=0的项，就会显示optionLabel）
• 如果分类数据源是远程加载的，要确保在Grid初始化前数据源已经加载完成，或者通过dataBound事件延迟初始化下拉框

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