Kendo 模板多选默认选中 - JavaScript

当使用 Kendo UI 的模板创建多选框时，可能需要在页面加载时预先选中某些选项。本文将介绍如何使用 JavaScript 在 Kendo 多选框中设置默认选中项。

步骤

1. 创建一个 Kendo 多选框，并设置其数据源：

$("#multiSelect").kendoMultiSelect({
  dataSource: [
    { id: 1, name: "Option 1" },
    { id: 2, name: "Option 2" },
    { id: 3, name: "Option 3" },
    { id: 4, name: "Option 4" },
    { id: 5, name: "Option 5" }
  ],
  dataTextField: "name",
  dataValueField: "id"
});

2. 定义一个数组 selectedValues 来存储默认选中的值：

var selectedValues = [2, 4];

3. 在 Kendo 多选框创建后，使用 select 方法设置默认选中项：

var multiSelect = $("#multiSelect").data("kendoMultiSelect");
for (var i = 0; i < selectedValues.length; i++) {
  multiSelect.select(multiSelect.dataSource.at(selectedValues[i] - 1));
}

4. 在上面的代码中，selectedValues 数组中存储的是默认选中的值的索引。使用 select 方法选中值时，需要传递该值所在数据源中的索引，因此需要将索引值减一（数组是从 0 开始）。

5. 最终的代码如下所示：

$("#multiSelect").kendoMultiSelect({
  dataSource: [
    { id: 1, name: "Option 1" },
    { id: 2, name: "Option 2" },
    { id: 3, name: "Option 3" },
    { id: 4, name: "Option 4" },
    { id: 5, name: "Option 5" }
  ],
  dataTextField: "name",
  dataValueField: "id"
});

var selectedValues = [2, 4];
var multiSelect = $("#multiSelect").data("kendoMultiSelect");
for (var i = 0; i < selectedValues.length; i++) {
  multiSelect.select(multiSelect.dataSource.at(selectedValues[i] - 1));
}

总结

使用上述方法，可以轻松设置 Kendo 多选框中的默认选中项。同时，也可以使用类似的方法设置 Kendo 的单选框（kendoDropDownList）、日期选择器（kendoDatePicker）和其他控件的默认值。