KendoUI 下拉过滤器不适用于 jquery

Question

我正在尝试过滤下拉列表并使用 nodatatemplate 从下拉列表中添加项目。问题是当我点击下拉菜单时它的显示值和快速关闭，所以我不能点击添加为新项目按钮。请看截图。 window 来得快，关得也快。 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", 中。如果我删除此行，则下拉菜单不会自动关闭。谢谢！

Answer 1

我创建了一个 fiddle，其中包含您的示例和 Telerik 演示页面中的示例：

fiddle: 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

Answer 2

其实是模式问题。我通过导致问题的 kendo 对话框将控件作为模态形式打开。我已将 kendo 对话框更改为 kendowindow 并已解决。谢谢

KendoUI 下拉过滤器不适用于 jquery

KendoUI dropdown filter doesn't work with jquery

asp.net-mvc

jquery

filter

kendo-ui