Kendo DropDownList调用setDataSource后select()无法选中项问题

核心问题原因 #

1. 数据源未正确初始化：在onEditTask函数的success回调中，调用ddAssignee.setDataSource(dataSource)时，dataSource变量根本没定义，也没调用getAllAssigneesDataSource()获取远程数据源，等于给下拉框设置了空数据源。
2. 异步加载未等待：就算正确获取了数据源，Kendo DataSource的read操作是异步的，刚调用setDataSource就去访问view()，此时数据还没加载完成，自然返回空数组，导致select方法找不到匹配项。

修复步骤 #

步骤1：补全数据源初始化 #

在onEditTask的success回调里，先调用getAllAssigneesDataSource()拿到数据源实例，再传给DropDownList：

initAssigneeDropDown();
var ddAssignee = $('#ddTaskAssignee').data('kendoDropDownList');
var dataSource = getAllAssigneesDataSource(); // 新增：获取远程数据源
ddAssignee.setDataSource(dataSource);

步骤2：等待数据加载完成再执行选中操作 #

因为数据源是异步加载的，必须等数据加载完才能调用select。推荐两种实现方式：

方式一：用DataSource的fetch方法等待加载完成

initAssigneeDropDown();
var ddAssignee = $('#ddTaskAssignee').data('kendoDropDownList');
var dataSource = getAllAssigneesDataSource();
ddAssignee.setDataSource(dataSource);

// 等待数据源加载完成后执行选中逻辑
dataSource.fetch(function() {
    ddAssignee.select(function(dataItem) {
        return dataItem.AssigneeTypeFK == assigneeTypeFK && dataItem.AssigneeFK == assigneeFK;
    });
});

方式二：监听DropDownList的dataBound事件

在初始化下拉框时添加dataBound事件，数据加载完成后自动触发选中：

function initAssigneeDropDown() {
    $("#ddTaskAssignee").kendoDropDownList({
        optionLabel: 'Select Assignee ...',
        filter: "contains",
        dataTextField: 'AssigneeName',
        dataValueField: 'AssigneeFK',
        template: function(dataItem) {
            if (dataItem.AssigneeTypeFK == 1)
                return '<span><i class="fas fa-user pr-2"></i>' + dataItem.AssigneeName + '</span>';
            else if (dataItem.AssigneeTypeFK == 2)
                return '<span><i class="fas fa-users pr-2"></i>' + dataItem.AssigneeName + '</span>';
        },
        dataBound: function(e) {
            // 从隐藏域获取需要选中的参数
            var targetType = $('#hiddenAssigneeTypeFK').val();
            var targetId = $('#ddTaskAssignee').val();
            if (targetType && targetId) {
                e.sender.select(function(dataItem) {
                    return dataItem.AssigneeTypeFK == targetType && dataItem.AssigneeFK == targetId;
                });
            }
        }
    });
}

然后在onEditTask的success回调里，先把需要选中的参数存入DOM：

success: function(response) {
    $('#taskModal .modal-content').replaceWith(response);

    // 把要选中的参数存入隐藏域，供dataBound事件使用
    $('#hiddenAssigneeTypeFK').val(assigneeTypeFK);
    $('#ddTaskAssignee').val(assigneeFK);

    initAssigneeDropDown();
    var ddAssignee = $('#ddTaskAssignee').data('kendoDropDownList');
    var dataSource = getAllAssigneesDataSource();
    ddAssignee.setDataSource(dataSource);
}

额外说明 #

点击“Take It”按钮能成功选中的原因是：此时用户交互触发了下拉框展开，Kendo自动完成了数据加载，view()里已有完整数据，所以select方法能找到匹配项。

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