如何解决KendoUI下拉过滤器不适用于jquery
我正在尝试过滤下拉列表,并使用nodatatemplate从下拉列表中添加项目。问题是当我单击下拉列表的显示值并快速关闭时,因此无法单击“添加为新项目”按钮。请看截图。窗口快要关闭了。 HTML
<div class="col-6">
<label class="ez-label-bold">Project Name</label>
<input type="text" id="Job_Splitprojectname" class="ez-select w-100">
</div>
$("#Job_Splitprojectname").kendoDropDownList({
filter: "startswith",dataSource: projectDS,dataTextField: "ProjectName",dataValueField: "ProjectID",optionLabel: "Select Project",noDataTemplate: $("#noDataTemplate").html()
});
nodatatemplate:
<script id="noDataTemplate" type="text/x-kendo-tmpl">
<div>
No Project Found. Do you want add as new Project - '#: instance.filterInput.val() #' ?
</div>
<br />
<button class="k-button" onclick="addNew('#: instance.element[0].id #','#: instance.filterInput.val() #')">Add as new Project</button>
</script>
What is the reason that dropdown automatically closing while click on dropdown?
(以毫秒为单位)在列表中并即将关闭。问题在这一行filter: "startswith",
中。如果我删除此行,则下拉列表不会自动关闭。谢谢!
解决方法
我创建了一个小提琴,其中包含您的示例以及Telerik演示页面中的示例:
提琴:http://jsfiddle.net/s1o7wrmt/1/
Telerik演示:https://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering
这也是代码:
<div class="col-6">
<label class="ez-label-bold">Project Name</label>
<input id="Job_Splitprojectname" />
<h4>Products</h4>
<input id="products" style="width: 100%;" />
</div>
$(document).ready(function() {
var projectDS = [
{ ProjectID: 1,ProjectName: "test 1" },{ ProjectID: 2,ProjectName: "test 2" },{ ProjectID: 3,ProjectName: "test 3" }
];
$("#Job_Splitprojectname").kendoDropDownList({
filter: "startswith",optionLabel: "Select Project",dataTextField: "ProjectName",dataValueField: "ProjectID",}).data("kendoDropDownList");
$("#products").kendoDropDownList({
filter: "startswith",dataTextField: "ProductName",dataValueField: "ProductID",dataSource: {
type: "odata",serverFiltering: true,transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",}
}
}
});
});
起初我看到的是您描述的相同行为,下拉列表将立即关闭!
我确定原因是jQuery版本设置为旧版本,而不是Kendo要求的最新版本。检查以确保您使用的Kendo版本需要支持的库版本:https://docs.telerik.com/kendo-ui/intro/supporting/jquery-support
,这实际上是模态形式的问题。我通过导致问题的kendodialog以模态形式打开控件。我已将kendo对话框更改为kendowindow,并已解决。谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。