populate List view from dropdown list selection

2 posts, 0 answers
  1. Jillian
    Jillian avatar
    16 posts
    Member since:
    Aug 2011

    Posted 13 Sep 2012 Link to this post

    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()

    <%: Html.Kendo().DropDownListFor(i => i.Make)
                    .DataSource(source => {
                        source.Read(read =>
                    .OptionLabel("Please Select")

    <%: Html.Kendo().ListView<Project.Models.ViewModel>()
                .DataSource(datasource =>
                        datasource.Read(read => read.Action("GetCascadeModels""Home")
                .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple))

  2. Vladimir Iliev
    Vladimir Iliev avatar
    2190 posts

    Posted 18 Sep 2012 Link to this post

    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.
    <script type="text/javascript">
        function selectionChanged(e) {
        function getSelectedItem(e)
            return { searchCriteria: $("#Make").data("kendoDropDownList").dataItem().ProductID };
    • 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.
                .DataSource(dataSource => {
                    dataSource.Read(read => read.Action("Products_Read_Filtered", "ListView").Data("getSelectedItem"));

    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!
Back to Top