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中的下拉列表之后，我找到了一个解决方案，尽管可能有点笨拙，允许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 逻辑。

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

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");
}
}
});