Kendo UI 如果使用 dataBound 设置选定值，下拉列表客户端过滤器将不起作用

Question

问题是使用 Kendo UI Dropdownlist 和 dataBound 方法在加载时设置选定值。

在 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。

Answer 1

在研究了 DOM 中的下拉列表后，我找到了一个解决方案，虽然可能有点 hacky，但允许 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" />

通过用条件检查包装 dataBound 初始化逻辑以查看输入的过滤器值 (filterInput) 是否为将在初始化时使用的空字符串，它允许过滤器的任何后续使用绕过 dataBound 逻辑。

请 post 如果您对此有任何其他见解或更好的解决方案。

Answer 2

要补充的是，每次打开下拉菜单时，只要检查 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");
    }
  }
});

Kendo UI 如果使用 dataBound 设置选定值，下拉列表客户端过滤器将不起作用

Kendo UI Dropdownlist client-side filter not working if dataBound is used to set selected value

filter

databound

transport

kendo-ui

drop-down-menu