动态刷新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

回答

相关问题