剣道UIドロップダウンリストdataBoundを使用して選択した値を設定した場合、クライアント側フィルタが機能しない

Question

剣道UIのドロップダウンリストを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"); 
 
    } 
 
    } 
 
});