Kendo UI 下拉过滤器不适用于 jquery

Posted 2023-05-08

【中文标题】Kendo UI 下拉过滤器不适用于 jquery

【英文标题】：KendoUI dropdown filter doesn't work with jquery

【发布时间】：2021-01-08 12:30:07

【问题描述】：

我正在尝试过滤下拉列表并使用 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", 。如果我删除此行，则下拉菜单不会自动关闭。谢谢！

【参考方案1】：

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

【讨论】：

这实际上是模态表单问题。我已将 kendo 对话框更改为 kendowindow 并已解决。谢谢

【参考方案2】：

这实际上是模态表单问题。我通过导致问题的 kendodialog 以模态形式打开控件。我已将 kendo 对话框更改为 kendowindow 并已解决。谢谢