KendoUIのドロップダウンは、サーバーのフィルタリングによる別のドロップダウンメニューに依存します。

Question

私は3回のドロップダウン（Category,Language,Product）を持っています。カテゴリーと言語が選択された後に商品を選択することができます。それから私は、サーバーから製品のドロップダウンのためのデータをロードする必要があります。区分（int型）+ 言語によって選択された製品のドロップダウンのためのJSON

データとしてサーバーから

• すべてのドロップダウン・ロード・データこの問題を解決する（文字列）

Answer 1

が必要です。

• 入力フィールドとMVCビュー（剣道は、JavaScriptを使用して、ドロップダウンを生成する）
• KendoUIドロップダウン・ロジックとアクションがドロップダウンメニューのフィルタリングのため
• 特別なクラスをJSONデータを提供して
• コントローラデータバインディング用のJavaScript
  ：データステップによって

ステップ（フィルターは、製品ドロップダウンデータバインドに必要とされています）1. MVCビュー

<input id="Category" required="required" name="Category" /> 
<input id="Language" required="required" name="Language" /> 
<input id="ProductId" required="required" name="ProductId" /> 

2. MVCビュー

<script> 
    $(document) 
     .ready(function() { 
      var categories = $("#Category") 
       .kendoDropDownList({ 
        autoBind: false, 
        optionLabel: "Select category...", 
        dataTextField: "Name", 
        dataValueField: "Id", 
        dataSource: { 
         type: "json", 
         serverFiltering: true, 
         transport: { 
          read: "@Html.Raw(Url.Action("GetProductCategories", "OfflineLicenses"))" 
        } 
       } 
      }).data("kendoDropDownList"); 


      var languages = $("#Language") 
       .kendoDropDownList({ 
        autoBind:false, 
        optionLabel: "Select language...", 
        dataTextField: "Name", 
        dataValueField: "Id", 
        dataSource: { 
         type: "json", 
         serverFiltering: true, 
         transport: { 
          read: "@Html.Raw(Url.Action("GetProductLanguages", "OfflineLicenses"))" 
         } 
        } 
       }) 
       .data("kendoDropDownList"); 

      var products = $("#ProductId") 
       .kendoDropDownList({ 
        autoBind: false, 
        enable: false, 
        optionLabel: "Select product...", 
        dataTextField: "Name", 
        dataValueField: "Sku", 
        dataSource: { 
         type: "json", 
         serverFiltering: true, 
         transport: { 
          read: { 
           url: "@Url.Action("GetProducts", "OfflineLicenses")", 
           dataType: "json", 
           type: "POST", 
           contentType: "application/json; charset=utf-8" 
          }, 
          parameterMap: function (options) { 
           return JSON.stringify(options); 
          } 
         } 
        } 
       }).data("kendoDropDownList"); 

       languages.bind("cascade", cascade); 
       categories.bind("cascade", cascade); 

       function cascade() { 
        if(languages.value() && categories.value()) { 
         products.enable(true); 
         products.dataSource.filter([ 
          { field: "Language", operator: "eq", value: languages.value() }, 
          { field: "CategoryId", operator: "eq", value: parseInt(categories.value()) }, 
         ]); 
        } else { 
         products.value(""); 
         products.enable(false); 
        } 
       } 
     }); 
</script> 

3.コントローラのメソッド

4.剣道フィルタクラスためのスクリプト

public class SortDescription 
{ 
    public string field { get; set; } 
    public string dir { get; set; } 
} 

public class FilterContainer 
{ 
    public FilterDescription[] filters { get; set; } 
    public string logic { get; set; } 
} 

public class FilterDescription 
{ 
    public string @operator { get; set; } 
    public string field { get; set; } 
    public string value { get; set; } 
} 

プロパティ名を確認することを忘れないでください（この例では、いくつかの特殊なプロパティ名を使用しています）。