jquery - 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()
        });

无数据模板：

<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",。如果我删除此行，则下拉菜单不会自动关闭。谢谢！

标签： jqueryasp.net-mvcfilterkendo-ui

我创建了一个小提琴，其中包含您的示例和 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

jquery - KendoUI 下拉过滤器不适用于 jquery

问题描述

解决方案

推荐阅读