ASP.NET MVC ListBox - Master / Detail


CONTINENTS
  • Africa6
  • Asia2
  • Australia5
  • Europe1
  • North America3
  • South America4
COUNTRIES
    The ListBox provides a built-in master / detail feature, which allows you to organize data from multiple data sources in the same ListBox. Use the Detail property to set up a detail ListBox.

    The detail ListBox supports all the features available in a regular ListBox.
    View - Aspx
    
        <% Html.Obout(new ListBox("ListBox1")
        {   
            HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>((info) =>
            {%>
                CONTINENTS
            <%}),
            Detail = new ListBox("ListBox2") {
                EnableLoadOnDemand = true,
                OnLoadingItems = "ListBox/LoadCountries",
                HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>((info) =>
                {%>
                    COUNTRIES
                <%})
            }
        }); %> 
        
        
    View - Razor
    
        @Html.Obout(new ListBox("ListBox1")
        {   
            HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>(
                @:CONTINENTS
            ),
            Detail = new ListBox("ListBox2") {
                EnableLoadOnDemand = true,
                OnLoadingItems = "ListBox/LoadCountries",
                HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>(
                    @:COUNTRIES
                )
            }
        })
        
        
    Controller
    
        public JsonResult LoadCountries(ListBoxLoadingItemsEventArgs args)
        {
            ListBoxItemList items = GetFilteredCountries(args.Text);
    
            JsonResult result = new JsonResult
            {
                Data = new
                {
                    Items = items
                },
                JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
    
            return result;
        }