New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Cascading ListBoxes

Environment

Product ListBox for Progress® Telerik® UI for ASP.NET MVC

Description

I have a few Telerik MVC ListBoxes with selection buttons (to move listitems) between one and the other linked ListBoxes.

I would like to force a refresh of the third ListBox when an item is removed or added from the first. It should cascade to only show the list items that are applicable to the items that are left in the first box.

Solution

I would suggest to pass the selected dataItems from listbox 1 in the Read().Data() method of listbox 3 when add or remove events occur and call the read() method of the third ListBox:

    @(Html.Kendo().ListBox()
        .Name("selectedGeoRegion")
        .Add("changeGeoRegion")
        .Remove("changeGeoRegion"))

    @(Html.Kendo().ListBox()
        .Name("selectedSwarmer")
        .DataSource(source => source
        .Read(read => read.Action("GetSwarmersForRegions", "Swarm")
        .Type(HttpVerbs.Post).Data("getselectedGeoRegions")
    ))

    <script>
        function changeGeoRegion() {
          setTimeout(function () {
               var selectedSwarmerListBox = $("#selectedSwarmer").data("kendoListBox");
               selectedSwarmerListBox.dataSource.read();
          });
        }

        function getselectedGeoRegions() {
            var theGeoRegionListBoxItems = $("#selectedGeoRegion").data("kendoListBox").dataItems();           
            return { RegionsSelected: theGeoRegionListBoxItems.length ? theGeoRegionListBoxItems.toJSON() : []  };
        }
    </script>

More ASP.NET MVC ListBox Resources

See Also

In this article