This is a migrated thread and some comments may be shown as answers.

populate List view from dropdown list selection

1 Answer 275 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Jillian
Top achievements
Rank 1
Jillian asked on 13 Sep 2012, 02:21 PM
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))
        %>

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 18 Sep 2012, 03:44 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView
Asked by
Jillian
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or