populate List view from dropdown list selection

[Jillian]

I have a dropdown list of vehicle makes.  I want a list view of vehicle models that should only be enabled and populated with data when a make is chosen from the dropdown.   Is this possible?

<script type="text/javascript">
    function filterModel() {
        return {
            VehicleType: $("#VehicleType").val(),
            Make: $("#Make").val()
        };
    }
</script>

<%: Html.Kendo().DropDownListFor(i => i.Make)
                .Name("Make")
                .DataTextField("Make")
                .DataValueField("Make_Code")
                .DataSource(source => {
                    source.Read(read =>
                        {
                            read.Action("GetCascadeMakes", "Home")
                                .Data("VehicleType");
                        })
                        .ServerFiltering(true);
                    })
                .OptionLabel("Please Select")
                .CascadeFrom("VehicleType")
                .Enable(false)
                .AutoBind(false)
                 %>

<%: Html.Kendo().ListView<Project.Models.ViewModel>()
            .Name("Model")
            .TagName("div")
            .ClientTemplateId("Models")
            .DataSource(datasource =>
                {
                    datasource.Read(read => read.Action("GetCascadeModels", "Home")
                        .Data("filterModel"));
                })
            .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple))
        %>

[Vladimir Iliev]

Hi Jillian, 


To enable loading ListView items depending on the selected item from DropDownList you should modify your code as shown in the steps below:

• Enable DropDownList and AutoBind of the DropDownList
• Attach function to change event of the DropDownList which calls read method of the DataSource.

e.g.:

<script type="text/javascript">
    function selectionChanged(e) {
        $("#listView").data("kendoListView").dataSource.read();
    };

    function getSelectedItem(e)
    {
        return { searchCriteria: $("#Make").data("kendoDropDownList").dataItem().ProductID };
    }
</script>

• Set AutoBind of the ListView to false
• Set the optional parameter data of the read method to call function which returns Id from currently selected DropDownList item.

e.g.:

@(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>()
            .Name("listView")
            .TagName("div")
            .ClientTemplateId("template")
            .DataSource(dataSource => {
                dataSource.Read(read => read.Action("Products_Read_Filtered", "ListView").Data("getSelectedItem"));
                dataSource.PageSize(12);
            })
            .Pageable()
            .AutoBind(false)
        )

Kind Regards,
Vladimir Iliev
the Telerik team