我一直试图实现这一点而没有成功。这是我的情景:
我需要使用文本启用实现一个kendo Combobox,这样你就可以输入一些文本,它会找到任何匹配的记录,但是,如果我点击下拉箭头,它会在里面显示一个网格,所有匹配记录(部分搜索),它应允许在列的标题中进行过滤。
我见过DropDownList的示例,里面有一个网格,但你无法在文本框中输入文字。
有没有人有关于如何实现这个的样本?
提前感谢您的回复
罗恩
答案 0 :(得分:1)
我终于开始工作,如果有人想知道如何实现这一点,这里是演示
<html>
<head>
<script src="script/jquery.min.js" type="text/javascript"></script>
<script src="script/kendo.all.min.js" type="text/javascript"></script>
<script>
var rootElement;
var grid;
var comboBox;
$(document).ready(function () {
comboBox = $('#comboList').kendoComboBox({
dataTextField:"name",
dataValueField:"id",
filter:"contains",
open: function (e) {
if (!$(grid.element).hasClass("k-custom-visible")) {
$(grid.element).slideToggle("fast", function () {
comboBox.close();
var selectedValue = $('#comboList').closest("span").children("span").children("input").val(); // comboBox.value();
if (selectedValue.length > 0) {
var filter = new Array();
if (!isNaN(selectedValue)){
filter.push({ field: "id", operator: "contains", value: selectedValue });
} else {
filter.push({ field: "name", operator: "contains", value: selectedValue });
}
grid.dataSource.filter(filter);
} else {
grid.dataSource.filter([]);
}
$(grid.element).addClass("k-custom-visible");
});
}
},
change: function (e) {
if ($(grid.element).hasClass("k-custom-visible")) {
var selectedValue = $('#comboList').closest("span").children("span").children("input").val(); // comboBox.value();
if (selectedValue.length > 0) {
var filter = new Array();
if (!isNaN(selectedValue)) {
filter.push({ field: "id", operator: "contains", value: selectedValue });
} else {
filter.push({ field: "name", operator: "contains", value: selectedValue });
}
grid.dataSource.filter(filter);
} else {
grid.dataSource.filter([]);
}
$(grid.element).addClass("k-custom-visible");
}
},
dataSource: [
{ name: "Cotton", id: "1" },
{ name: "Polyester", id: "2" },
{ name: "Cotton/Polyester", id: "3" },
{ name: "Rib Knit", id: "4" }
]
}).data("kendoComboBox");
rootElement = $(comboBox.rootElement);
grid = $("#grid").kendoGrid({
dataSource: {
data:[
{ name: "Cotton", id: "1" },
{ name: "Polyester", id: "2" },
{ name: "Cotton/Polyester", id: "3" },
{ name: "Rib Knit", id: "4" }
]
},
columns: [
{
title: "User Id",
field: "id"
},
{
title: "User Name",
field: "name"
}
],
selectable: true,
pageable: true,
filterable: {
mode: "row"
},
change: function (e) {
var selected = $.map(this.select(), function(item){
return $(item)[0].cells[0].innerHTML;
});
comboBox.value(selected[0]);
$(grid.element).slideToggle('fast', function () {
$(grid.element).removeClass("k-custom-visible");
});
}
}).data("kendoGrid");
$(grid.element).css({ "border": "1px solid grey", "display": "none", "position": "absolute" });
$(grid.element).css({ "top": rootElement.position().top + rootElement.height(), "left": rootElement.position().left });
});
$(document).click(function (e) {`enter code here`
// Ignore clicks on the grid.
if (!$(e.target).hasClass("k-button") && !$(e.target).hasClass("k-textbox")) {
if ($(e.target).closest("div.k-grid").length == 0 && $(e.target).closest(".k-grid-edit").length == 0 && $(e.target).closest(".k-grid-edit-row").length == 0) {
// If visible, then close the grid.
if ($(grid.element).hasClass("k-custom-visible")) {
$(grid.element).slideToggle('fast', function () {
$(grid.element).removeClass("k-custom-visible");
});
}
}
}
});
</script>
</head>
<body>
<div>
<input id="comboList" placeholder="Enter Name" />
<div id="grid" style="width:800px; z-index:10;"></div>
</div>
</body>
</html>