動態刷新KendoUI DropdownList

我有以下三個KendoUI下拉列表框;動態刷新KendoUI DropdownList

@(Html.Kendo().DropDownList() 
    .HtmlAttributes(new { style = "width:auto;height:25px" }) 
    .OptionLabel("Make (any)") 
    .Name("Make") 
    .DataTextField("Name") 
    .DataValueField("MakeId") 
    .DataSource(source => 
    { 
      source.Read(read => 
      { 
       read.Action("GetMakes", "Home"); 
      }) 
      .ServerFiltering(true); 
    }) 
    .SelectedIndex(0) 
    ) 

    @(Html.Kendo().DropDownList() 
      .Name("Model") 
      .HtmlAttributes(new { style = "width:auto;height:25px" }) 
      .OptionLabel("Model (any)") 
      .DataTextField("Name") 
      .DataValueField("ModelId") 
      .DataSource(source => { 
       source.Read(read => 
       { 
        read.Action("GetModels", "Home") 
         .Data("FilterModels"); 
       }) 
       .ServerFiltering(true); 
      }) 
      .Enable(false) 
      .AutoBind(false) 
      .CascadeFrom("Make") 

    ) 



    @(Html.Kendo().DropDownList() 
      .Name("Fuel") 
      .HtmlAttributes(new { style = "width:auto;height:25px" }) 
      .OptionLabel("Fuel type (any)") 
      .DataTextField("Name") 
      .DataValueField("FuelTypeId") 
      .DataSource(source => { 
       source.Read(read => 
       { 
        read.Action("GetFuelTypes", "Home") 
         .Data("FilterFuelTypes"); 
       }) 
       .ServerFiltering(true); 
      }) 
      .Enable(false) 
      .AutoBind(false) 

    )

在當用戶選擇從製作的DropDownList的值的時刻，該模型的DropDownList使用CascadeFrom自動填充（）。

但是現在，當更新品牌或型號列表時，我想更新燃料下拉列表，並且我發現您只能有一個CascadeFrom調用。

有關如何實現這一目標的任何建議？

來源

2013-07-23 Tommassiov

請問燃油下拉曾經火根據CascadeFrom一個模型選擇？選型不是從型號級聯選擇的？看起來像你的Fuel下拉菜單隻需要從Make下拉菜單中級聯。 –

我想允許用戶選擇一個Make並獲取所有的FuelTypes，或者選擇一個Make然後Model，然後獲取所有的FuelTypes。 – Tommassiov

我在這篇文章中找到了對我的問題的解決方案http://stackoverflow.com/questions/13620877/kendoui-cascading-dropdownlists-need-value-from-2-dropdownlists – Tommassiov

作爲一種解決方法，我將使用Model下拉列表中的select事件來啓動功能，以刷新Fuel下拉菜單並向Fuel下拉菜單中添加CascadeFrom（「Make」）。

這會在選擇製作後觸發讀取動作，然後在選擇模型後刷新燃料下拉菜單。

@(Html.Kendo().DropDownList() 
     .Name("Model") 
     .HtmlAttributes(new { style = "width:auto;height:25px" }) 
     .OptionLabel("Model (any)") 
     .DataTextField("Name") 
     .DataValueField("ModelId") 
     .DataSource(source => { 
      source.Read(read => 
      { 
       read.Action("GetModels", "Home") 
        .Data("FilterModels"); 
      }) 
      .ServerFiltering(true); 
     }) 
     .Enable(false) 
     .AutoBind(false) 
     .CascadeFrom("Make") 
     .Events(events => events.Select("select")) 
)

選擇事件連線到型號下拉刷新燃料下拉：

<script> 
    function select(e) { 
    // get a referenence to the Kendo UI DropDownList 
    var dropdownlist = $("#Fuel").data("kendoDropDownList"); 

    if (dropdownlist) { 
     // re-render the items in drop-down list. 
     dropdownlist.refresh(); 
    } 
    }; 
</script>

來源

2013-07-23 16:58:58

謝謝。這是我想弄明白的。我將如何傳遞選定的MakeId或ModelId，以便Fuel列表只匹配選擇的內容？ – Tommassiov

在select方法中，您可以爲ModelId執行類似'this.dataItem（e.item.index（））.value'的操作。如果您從Make有一個Data fluent方法級聯燃料下拉，您可以附加到dataSource中的讀取操作。這個[demo]（http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html）就是一個很好的例子。 –

感謝您的經驗，如果我想添加額外的下拉列表，例如引擎大小，顏色等，您會怎麼做？只要另一個下拉列表發生更改，就需要更新所有這些列表。 – Tommassiov

這對我的作品

$("#Fuel").data("kendoDropDownList").dataSource.read();

來源

2015-02-24 18:30:44

它將是「$（」＃Fuel「）。數據（「kendoDropDownList」）dataSource.read（）;」。屬性「dataSource」有一個大寫字母 – Anytoe

動態刷新KendoUI DropdownList

回答

相關問題