1

我有这个代码：

$("#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",
    })
}

谢谢。

4

2 回答 2

2

首先，在列中，您说列名是Buyer，但在您使用的自动完成中buyer。

就是说，您应该做的是在filterable.ui. 所以列定义为buyer：

{
    field     : "buyer",
    title     : "Buyer",
    width     : "40",
    filterable: {
        ui: function (element) {
            element.kendoAutoComplete({
                dataSource   : orders,
                dataTextField: "buyer"
            })
        }
    }
},
于 2013-06-06T18:59:34.410 回答
0

首先，我们使用设置指定单个过滤条件filterable->extra=false，并将字符串列的过滤运算符限制为仅以等于和不等于开头。然后我们定义内置的日期选择器 UI 来过滤网格中的日期时间列，并分别为 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>

于 2019-12-12T08:37:43.410 回答