MVC5下Kendo UI jQuery网格动态ForeignKey下拉不显示文本问题

我的应用为MVC 5，使用Kendo UI jQuery可编辑网格，其中一列是下拉列表，配置如下：

{ field: "ApplicableCourse_ID", title :"Course", values: myDDL1 }

我通过如下Ajax请求生成值数组myDDL1：

$.ajax({
        url: '@Url.Action("GetFreeAccessDropdownList", "fff")',
        type: "GET",
        async: false,
        cache: false,
        dataType: "json",
        success: function (result) {
            myDDL1.push(JSON.stringify(result.Grid1));
           var grid = $("#grid").data("kendoGrid");
            grid.refresh();
        },
        error: function (request, status, error) {
            alert(request.responseText);
        }
    });

请求可获取到正确的value和text值：

但网格仅展示value值而非对应的text文本。如果使用如下静态数组：

var myDDL1 = [
        { "value": 54, "text": "Fuel Spill Response Plan" },
        { "value": 56, "text": "Community Fuel Contractor Manual" },
        { "value": 91, "text": "Blocking and Cribbing" }];

则可正常显示对应text文本。请问该场景下动态数组和静态数组存在什么差异？该问题如何修复？

二者差异 #

• 静态数组内存放的是Kendo要求的{value, text}结构的原生对象，网格可以正常读取映射关系，把字段的value值转换为对应的text展示。
• 动态填充数组时你调用了JSON.stringify()，将返回的选项对象/数组转成了JSON字符串，Kendo无法识别字符串类型的映射规则，只能直接输出原始的字段值。此外如果result.Grid1本身就是完整的选项数组，直接push会导致myDDL1变成嵌套数组结构，同样无法被Kendo识别。

修复方案 #

1. 修正回调赋值逻辑 #

去掉JSON.stringify操作，直接将返回的选项数组合并到myDDL1中，同时主动更新列的映射配置即可：

success: function (result) {
    // 清空原有选项，不需要可删除
    myDDL1.length = 0;
    // 直接合并返回的选项数组，不要转字符串
    myDDL1.push(...result.Grid1);
    var grid = $("#grid").data("kendoGrid");
    // 重新给列配置values属性，刷新映射关系
    const targetColumn = grid.columns.find(col => col.field === "ApplicableCourse_ID");
    if(targetColumn) targetColumn.values = myDDL1;
    grid.refresh();
}

2. 优化建议 #

不推荐使用async: false同步请求，会阻塞页面渲染，建议调整加载顺序：先请求下拉选项，拿到数据后再初始化Kendo网格，避免后续修改配置的额外操作。

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