Kendo UI Dropdownlist客戶端過濾器不工作如果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" />

我需要的數據綁定的方式來只火初始化或過濾器沒有進一步繁殖，從而避免過濾後的數據綁定的電話。

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" />

通過用條件檢查，看看是否所輸入的濾波值（filterInput）是一個空字符串，這將是在初始化包裹所述數據綁定初始化邏輯，它允許任何後續使用的該過濾器繞過dataBound邏輯。

如果您有任何其他見解或更好的解決方案，請發佈。

Answer 2

繼續添加，只是檢查filterInput值也會將此值設置回初始值，每次在此之後打開下拉菜單。因此，在您更改該值後，無論您是否將其更改爲「蘋果」，每當您打開下拉菜單時，它都會重置爲「橙子」。

添加另一個支票！THIS.VALUE（）

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