ASP.NET MVC ComboBox - Master / Detail with Unlimited Detail Levels


The ComboBox provides a built-in master / detail feature, which allows you to organize data from multiple data sources in the same ComboBox. Use the Detail property to set up a detail ComboBox.

The detail ComboBox supports all the features available in a regular ComboBox.

You can set up any number of detail levels. This example showcases a ComboBox with three levels, for customers, orders and products.
View - Aspx

    <% Html.Obout(new ComboBox("ComboBox1")
    {   
         HeaderTemplate = new OboutMvcTemplate<ComboBoxHeaderTemplateContainerInfo>((info) =>
        {%> 
            CUSTOMERS
        <%}),
        Detail = new ComboBox("ComboBox2")
        {
            EnableLoadOnDemand = true,
            OnLoadingItems = "ComboBox/LoadOrders",
            HeaderTemplate = new OboutMvcTemplate<ComboBoxHeaderTemplateContainerInfo>((info) =>
            {%> 
                ORDERS
            <%}),
            Detail = new ComboBox("ComboBox3")
            {
                EnableLoadOnDemand = true,
                OnLoadingItems = "ComboBox/LoadProducts",
                HeaderTemplate = new OboutMvcTemplate<ComboBoxHeaderTemplateContainerInfo>((info) =>
                {%> 
                    PRODUCTS
                <%})
            }
        }
    }); %> 
    
    
View - Razor

    @Html.Obout(new ComboBox("ComboBox1")
    {   
        HeaderTemplate = new OboutMvcTemplate<ComboBoxHeaderTemplateContainerInfo>(
            @:CUSTOMERS
        ),
        Detail = new ComboBox("ComboBox2")
        {
            EnableLoadOnDemand = true,
            OnLoadingItems = "ComboBox/LoadOrders",
            HeaderTemplate = new OboutMvcTemplate<ComboBoxHeaderTemplateContainerInfo>(
                @:ORDERS
            ),
            Detail = new ComboBox("ComboBox3")
            {
                EnableLoadOnDemand = true,
                OnLoadingItems = "ComboBox/LoadProducts",
                HeaderTemplate = new OboutMvcTemplate<ComboBoxHeaderTemplateContainerInfo>(
                    @:PRODUCTS
                )
            }
        }
    })
    
    
Controller

    public JsonResult LoadOrders(ComboBoxLoadingItemsEventArgs args)
    {
        ComboBoxItemList items = GetFilteredCountryNames(args.Text);

        JsonResult result = new JsonResult
        {
            Data = new
            {
                Items = items
            },
            JsonRequestBehavior = JsonRequestBehavior.AllowGet
        };

        return result;
    }

    public JsonResult LoadProducts(ComboBoxLoadingItemsEventArgs args)
    {
        ComboBoxItemList items = GetFilteredCustomers(args.Text);

        JsonResult result = new JsonResult
        {
            Data = new
            {
                Items = items
            },
            JsonRequestBehavior = JsonRequestBehavior.AllowGet
        };

        return result;
    }
    
    
obout.com 
obout.com Home 
News 
ASP.NET MVC ComboBox Home   
ASP.NET MVC ComboBox Home 
Examples - 53
Appearance - 1 
Live Styles 
Autocomplete & Filtering - 2 
Autocomplete  
Filtering  
Load on Demand - 7 
Load Items on Demand 
Load Items on Demand with Paging  
Virtual Scrolling  
Initial Text  
Initial Text on Client-Side  
Load Items on Button Click  
Load Items with MinChars  
Multi-Columns - 4 
Grid-like Multi-Columns  
Grid-like Multi-Columns & Tooltips  
Multiple Rows and Columns  
State Selector  
Items with Icons - 3 
Items with Icons  
Grid-like Multi-Columns with Icons  
Multiple Rows and Columns with Icons  
Templates - 3 
Item Templates  
Header Templates  
Populating with Data - 1 
Populate with Data  
Item Selection - 6 
Single Item Selection  
Multi Item Selection  
Get Selected Item  
Get Selected Items  
Set Selected Item  
Set Selected Items  
Mode - 2 
ComboBox  
TextBox  
Master/Detail - 3 
Master/Detail  
Unlimited Detail Levels  
Cascading ComboBoxes  
Integration - 3 
Items with ASP.NET CheckBoxes  
Items with Obout CheckBoxes  
RadioButtons inside ComboBox  
Settings - 8 
AllowCustomText  
AllowEdit  
AutoPostback  
AutoValidate  
Height  
MenuWidth  
OpenOnFocus  
Width  
Server-Side API - 2 
Server-Side Events  
Enable / Disable  
Client-Side API - 8 
Client-Side Events  
Add / Remove Items  
Add Multi-Column Items  
Enable / Disable  
Get Selected Item  
Reset Selection  
Select / Deselect All Items  
Move Items  
Documentation - 1 
ChangeLog