Question

我有这段代码：

$("#grid_detail").kendoGrid({
    dataSource: {
        data: orders
    },
    filterable: {
        extra: false,
        operators: {
            string: {
                contains: "Contains",
            }
        }
    },
    sortable: true,
    columns: [
        {
            field: "Buyer",
            title: "buyer",
            width: "40"
        },
        {
            field: "name",
            title: "Article name",
            width: "40"
        },
        {
            field: "paid",
            title: "Paid",
            width: "20",
            filterable: false
        }
    ]
});

现在，我如何过滤现场买家，但是要使用自动填充功能，并显示dataSource中的所有买家？

我试着对买家提起诉讼，但仍然没有。

filterable: function(element){
    element.kendoAutoComplete({
        dataSource: orders,
        dataTextField: "buyer",
    })
}

感谢。

Answer 1

首先，在列中，您说列名称为Buyer，但在该自动填充中，您使用的是buyer。

说，你应该做的是在filterable.ui中生成自动完成功能。因此buyer的列定义是：

{
    field     : "buyer",
    title     : "Buyer",
    width     : "40",
    filterable: {
        ui: function (element) {
            element.kendoAutoComplete({
                dataSource   : orders,
                dataTextField: "buyer"
            })
        }
    }
},

Answer 2

首先，我们使用filterable->extra=false设置指定单个过滤条件，并将字符串列的过滤器运算符限制为仅以等于或不等于开头。然后，我们定义内置的日期选择器UI来过滤网格中的datetime列，并分别为Title和City列实例化Kendo UI AutoComplete和DropDownList。

要创建下拉过滤器，我们将javascript函数分配给相应列的filterable->ui属性。

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/filter-menu-customization">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
    

</head>
<body>
        <script src="../content/shared/js/people.js"></script>

        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            schema: {
                                model: {
                                    fields: {
                                        City: { type: "string" },
                                        Title: { type: "string" },
                                        BirthDate: { type: "date" }
                                    }
                                }
                            },
                            pageSize: 15
                        },
                        height: 550,
                        scrollable: true,
                        filterable: {
                            extra: false,
                            operators: {
                                string: {
                                    startswith: "Starts with",
                                    eq: "Is equal to",
                                    neq: "Is not equal to"
                                }
                            }
                        },
                        pageable: true,
                        columns: [
                            {
                                title: "Name",
                                width: 160,
                                filterable: false,
                                template: "#=FirstName# #=LastName#"
                            },
                            {
                                field: "City",
                                width: 130,
                                filterable: {
                                    ui: cityFilter
                               }
                            },
                            {
                                field: "Title",
                                filterable: {
                                    ui: titleFilter
                                }
                            },
                            {
                                field: "BirthDate",
                                title: "Birth Date",
                                format: "{0:MM/dd/yyyy HH:mm tt}",
                                filterable: {
                                    ui: "datetimepicker"
                                }
                            }
                       ]
                    });
                });

                function titleFilter(element) {
                    element.kendoAutoComplete({
                        dataSource: titles
                    });
                }

                function cityFilter(element) {
                    element.kendoDropDownList({
                        dataSource: cities,
                        optionLabel: "--Select Value--"
                    });
                }

            </script>
        </div>


</body>
</html>

kendo ui网格过滤器自动完成

2 个答案: