我有此代码：
$("#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",
})
}
谢谢。
首先，在列中您说列名是Buyer，但在自动完成中，您使用buyer。
说，您应该做的是在filterable.ui中生成自动完成功能。因此，buyer的列定义为：
{
field : "buyer",
title : "Buyer",
width : "40",
filterable: {
ui: function (element) {
element.kendoAutoComplete({
dataSource : orders,
dataTextField: "buyer"
})
}
}
},
首先，我们使用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>