如果dataBound用于设置选定值,则Kendo UI Dropdownlist客户端过滤器不起作用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如果dataBound用于设置选定值,则Kendo UI Dropdownlist客户端过滤器不起作用相关的知识,希望对你有一定的参考价值。

问题是当使用带有dataBound方法的Kendo UI Dropdownlist在加载时设置所选值。

在DataBound方法中设置值的原因是为了确保传输已使用下拉列表的数据项返回,以防止竞争条件失败。这在下面的静态示例中没有说明,但我的数据集来自传输服务器端调用。

设置下拉列表的选项过滤器:“startswith”非常适用于简单的客户端过滤,但是由于使用了dataBound而出现问题。关于此的文档非常少,但是在初始化下拉列表时以及任何方法对其采取操作(包括过滤)时都会调用dataBound。

通过在检查器工具中放置调试器,我能够观察到过滤器方法正常工作,然后再次点击dataBound方法并将其设置为初始化值。结果是看起来过滤器完全失败了。

请参阅以下示例。要重新创建问题,请尝试使用下拉列表的过滤器功能,键入“Apple”并观察发生的情况。

$("#dropdownlist").kendoDropDownList({
  dataSource: ["Apples", "Oranges"],
  filter: "startswith",
  dataBound: function(e) {
    $("#dropdownlist").data('kendoDropDownList').value("Oranges");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<link href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.nova.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" rel="stylesheet" />

<input id="dropdownlist" />

我需要一种方法让dataBound只在初始化时触发,或者使过滤器不再传播,从而避免在过滤后调用dataBound。

答案

在研究了DOM中的下拉列表之后,我找到了一个解决方案,尽管可能有些麻烦,允许dataBound初始化并在传输加载列表后设置值,并防止它劫持过滤器方法。

$("#dropdownlist").kendoDropDownList({
  dataSource: ["Apples", "Oranges"],
  filter: "startswith",
  dataBound: function(e) {
    if (e.sender.filterInput.val() === "") {
      $("#dropdownlist").data('kendoDropDownList').value("Oranges");
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<link href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.nova.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" rel="stylesheet" />

<input id="dropdownlist" />
另一答案

添加它只是检查filterInput值也会在每次打开下拉列表后将值设置回初始值。因此,在您更改值后,无论您是否将其更改为“Apples”,每当您打开下拉列表时,它都将始终重置为“Oranges”。

添加另一个检查!this.value()

$("#dropdownlist").kendoDropDownList({
  dataSource: ["Apples", "Oranges"],
  filter: "startswith",
  dataBound: function(e) {
    if (!this.value() && e.sender.filterInput.val() === "") {
      $("#dropdownlist").data('kendoDropDownList').value("Oranges");
    }
  }
});

以上是关于如果dataBound用于设置选定值,则Kendo UI Dropdownlist客户端过滤器不起作用的主要内容,如果未能解决你的问题,请参考以下文章

每次页面更改和排序都会触发 Kendo 网格的 dataBound 事件

Angular 2 Grid dataBound 事件的 Kendo UI

动态生成列名时如何获取kendo选择的行值

更新 ViewModel 时如何防止 Kendo UI Grid 多次重新绑定

发布剑道网格值

如何在 Kendo UI TabStrip 中获取对当前选定选项卡的引用?