当从 API 调用中读取 multiselect 选项时，如何使用复选框为 KendoMultiselect 预 select 值

Question

我正在尝试为我的 Kendo 网格中的其中一列设置预先 select 的多 select 复选框过滤器值。我不确定如何实现这一目标。

我尝试使用 'value' 属性。但它似乎不适用于我的代码。我尝试了以下两种方法，考虑到 getStatusCol API 确实有 "New" 作为它的值之一。

GetStatusCol API returns 作为字符串的 Status[]。

function setStatus(element) {
    element.kendoMultiSelect({
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "../../api/GetStatusCol"
                }
            }
        },
        value: ["New"],
        change: function (e) {
        var filter = { logic: "or", filters: [] };
        var values = this.value();
        $.each(values, function (i, v) {                 
            filter.filters.push({ field: "Status", operator: "eq", value: v});                   
        });
        console.log(this.dataSource.data());
        this.dataSource.filter(filter);
        },          
    });
}

并且稍后还尝试像下面这样定义值

function setStatus(element) {
    element.kendoMultiSelect({
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "../../api/GetStatusCol"
                }
            }
        },

        change: function (e) {
        ...         
    });
    element.getKendoMultiSelect().value(["New"]);

}

下面是我如何定义列和 multiselect UI

Columns: [
    { field: "ID", title: "ID", type: "number", hidden: true, "menu": false },                       
    {
        field: "Status", title: "Status", type: "string", filterable: {
            ui: setStatus,
            multi: true
        }
    }                       
]


function setStatus(element) {
    element.kendoMultiSelect({
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "../../api/GetStatusCol"
                }
            }
        },
        change: function (e) {
        var filter = { logic: "or", filters: [] };
        var values = this.value();
        $.each(values, function (i, v) {                 
            filter.filters.push({ field: "Status", operator: "eq", value: v});                   
        });
        console.log(this.dataSource.data());
        this.dataSource.filter(filter);
        },          
    });
}

我是 Kendo 的新手，需要一些帮助来弄清楚这里出了什么问题。

提前致谢！

Answer 1

如果您将 multi-select 绑定到字符串数组。正如您已经实现的那样，可以像字符串数组一样指定该值。

<select id="multiselect" multiple="multiple"></select>
<script>
$("#multiselect").kendoMultiSelect({
     dataSource: ["New", "In Progress", "Closed", "Re-open"],
     value: ["New"]
});
</script>

但是如果您的 API 正在返回像对象数组一样的数据，您需要像下面这样映射它：-

<div id="example" >
    <div class="demo-section k-content">
        <h4>Products</h4>
        <select id="products"></select>
    </div>
    <script>
        $(document).ready(function() {
            $("#products").kendoMultiSelect({
                placeholder: "Select products...",
                dataTextField: "ProductName",
                dataValueField: "ProductName",
                autoBind: false,
                dataSource: {
                    type: "json",
                    serverFiltering: true,
                    transport: {
                        read: {
                             url: "https://demos.telerik.com/kendo-ui/service/products",
                                                 dataType: "jsonp"
                        }
                    }
                },
                value: [
                    { ProductName: "Ipoh Coffee"},
                    { ProductName: "Chai" }
                ]
            });
        });
    </script>
</div>

使用 API reference 获取更多示例。

当从 API 调用中读取 multiselect 选项时，如何使用复选框为 KendoMultiselect 预 select 值

How to Pre-select value for KendoMultiselect with checkboxes, when the multiselect options are read from an API call

javascript

jquery-ui

kendo-ui

kendo-grid

kendo-multiselect