预加载使用服务器绑定数据源和模板标签的剑道多选的选定值

Question

我有一个剑道多选，如下所示。

$("#tags").kendoMultiSelect({
    change: onChange,
    dataSource: {
        transport: {
            prefix: "",
            read: {
                url: "/OpsManager/Api/Activity/SearchResourcesTagged",
                data: getSubmitData
            }
        },
        serverFiltering: true,
        filter: [],
        schema: { errors: "Errors" }
    },
    itemTemplate: $('#resourceItemTemplate').html(),
    tagTemplate: $('#resourceTagTemplate').html(),
    dataValueField: "k",
    value: [{"k":"[109]","n":"All Open Alerts","icon":"!","all":105}]
});

使用以下模板：

<script id="resourceItemTemplate" type="text/x-kendo-template">
    <span data-icon="#:data.icon#" class="#: data.s || '' #">&nbsp;#:data.n #</span>  
    # if (data.d) { #
        <div class="details">#: data.d #</div>
    # } #
    # if (data.details) { #
    <div class="details k-state-disabled">
        # for (var v in data.details) { 
            var t = typeof data.details[v];
            if (t != "object" && t != "function" && v != "uid") { #
        <div class="k-button">#: v #: #: data.details[v] #</div>
        # } } #
    </div>
    # } #      
</script>

<script id="resourceTagTemplate" type="text/x-kendo-template">
    <span data-icon="#:data.icon#" class="tag-content #: data.s || '' #">&nbsp;#:data.n #</span> 
</script>
<select id="tags" multiple="multiple" name="tags"></select>

我正在尝试预加载特定的选择，但我似乎无法让它工作。

选择：

[{"k":"[109]","n":"All Open Alerts","icon":"!","all":105}]

我已经根据他们的文档将初始化值放在适当的位置，并在浏览器中查看多选对象我在 _initialValues 中看到传入的对象，但在 _dataItems 或 ui 上的标记列表中看不到任何内容.

任何线索如何使它工作？

Answer 1

感谢@OnaBai，

问题在于数据源的预期内容不同。最初加载的数据源不是在寻找“[109]”，而是在寻找“一些字符串查询”，然后围绕该搜索提供一个特定列表。因此我需要为控件初始化一个假数据源，然后立即为动态数据源切换数据源。

$("#tags").kendoMultiSelect({
    change: onChange,
    dataSource: {
        transport : {
            read: function (op) {
                op.success([{"k":"[109]","n":"All Open Alerts","icon":"!","all":105}]);
            }
        }
    },
    itemTemplate: $('#resourceItemTemplate').html(),
    tagTemplate: $('#resourceTagTemplate').html(),
    dataValueField: "k",
    value: ["[109]"]
});
$("#tags").data("kendoMultiSelect").setDataSource({
    transport: {
        read: {
            url: "OpsManager/Api/Activity/SearchResourcesTagged",
            data: getSubmitData
            }
        },
    serverFiltering: true,
    filter: [],
    schema: { errors: "Errors" }
});

之后它的工作方式与预期完全一样。

Answer 2

两个问题：

1. 在multiselect 中定义value 而不是在dataSource 中。
2. 将value 设置为array，其中包含您要最初加载的键值列表（在您的情况下为"[109]"）。

类似：

$("#tags").kendoMultiSelect({
    change: onChange,
    dataSource: {
        transport: {
            prefix: "",
            read: {
                url: "/OpsManager/Api/Activity/SearchResourcesTagged",
                data: getSubmitData
            }
        },
        serverFiltering: true,
        filter: [],
        schema: { errors: "Errors" }
    },
    itemTemplate: $('#resourceItemTemplate').html(),
    tagTemplate: $('#resourceTagTemplate').html(),
    dataValueField: "k",
    value: ["[109]"]
});

here 中的示例