Kendo MVC Multiselect通过JS赋值出现重复控件如何正确填充值

你遇到的重复生成控件问题，核心是JS代码中重复初始化了Kendo MultiSelect组件。$("#Test").kendoMultiSelect() 的作用是在目标元素上初始化全新的MultiSelect组件，而非获取已存在的组件实例，多次调用就会生成多个重复控件。

基础赋值操作（数据源已加载完成时使用） #

// 直接获取已渲染的组件实例，无需重复初始化
const multiselect = $("#Test").data("kendoMultiSelect");
// MultiSelect为多选组件，value方法需传入数组类型参数，开启ValuePrimitive时直接传值的数组即可
multiselect.value(["Test"]);
// 如需触发值变更的关联逻辑，手动触发change事件
multiselect.trigger("change");

异步数据源场景赋值（赋值时数据源还未加载完成） #

如果你的MultiSelect数据源是异步请求获取，需要等数据源加载完成后再赋值，避免值匹配失败：

const multiselect = $("#Test").data("kendoMultiSelect");
// 绑定dataBound事件，数据源加载完成后自动执行赋值
multiselect.bind("dataBound", function() {
    this.value(["Test"]);
    this.trigger("change");
});
// 若需要主动触发数据源加载
multiselect.dataSource.read();

注意事项 #

• 你开启了ValuePrimitive(true)，传入的数组元素直接对应选项的value值即可，无需传完整的选项对象
• 即使只需要选中单个选项，也必须将值包装为数组传入value()方法，否则会出现赋值不生效的问题

内容的提问来源于stack exchange，提问作者KevinLübke