Question

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

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

GetStatusCol API以字符串[]的形式返回状态。

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"]);

}

这是我定义列和多选用户界面的方式

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);
        },          
    });
}

我是剑道的新手，需要一些帮助来确定这里出了什么问题。

提前谢谢！

Answer 1

如果要将多选绑定到字符串数组。您已经实现了，可以像字符串数组一样指定该值。

<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调用读取多选选项时，如何使用复选框预选KendoMultiselect的值

1 个答案: