Grouping in ComboBox and List in MVC

While Grouping is a widely used feature for data controls like Grid and Reporting controls, there can also be a need to use the same with input controls like ComboBox or even List control when the list of items to be displayed is extensive.

Let’s say your customers are having hard time scrolling through the long list of products to find the product for which they would like to submit a support ticket. It would be easier for them to locate, if the items in the combo box or list control listing the products were categorized like below:

Implementing this feature requires the DataSource to be grouped by the Category and the Control should be able to display the Groups and its constituents. The ComponentOne ComboxBox and List support this feature, using the C1 Collection View.

You'll need to use the C1 CollectionView’s GroupBy property for grouping Data based on Category. We can bind this dataset to C1’s ComboBox/List so that the user can select the product easily. This caters to the grouping at the data level.

Let's understand this further by implementing the example we discussed above.

Using JavaScript

Until 2018 v2, in order to show grouping at the control level, this involved writing JavaScript code to create the Groups after initializing the ComboBox, ListBox, and C1Collection View. The Razor Syntax Code that is used to Display the ComboBox and ListBox is:

@(Html.C1().ListBox().Id("lbProductsJs").DisplayMemberPath("Name"))</div>
@(Html.C1().ComboBox().IsEditable(true).Id("cbProductsJs").DisplayMemberPath("Name"))

Initialize the CollectionView set Grouping using GroupBy Property.

Here we have grouped using key “ProductSolution” to group data:

@(Html.C1().CollectionViewService<Product>().Id("cvProducts").GroupBy("ProductSolution").Bind(products))

Now let's focus on the JS Code:

//Window Load event to get the MVC Controls and format the control and set the Itemsource after flattening the Groups
  window.addEventListener("load", function () {


        var products = c1.getService('cvProducts');
        var cb = wijmo.Control.getControl("#cbProductsJs");
        var lb = wijmo.Control.getControl("#lbProductsJs");

        // Attach formatting item event to customize layout
        cb.formatItem.addHandler(formatListItem);
        lb.formatItem.addHandler(formatListItem);


        cb.itemsSource = flattenGroups(products.groups);
        cb.selectedIndex = 1; // by pass the default selected index.


        lb.itemsSource = flattenGroups(products.groups);
        lb.selectedIndex = 1; // by pass the default selected index.
    }, false);


// Need to flatten the Groups to Display the Grouped Data
function flattenGroups(groups) {

        let items = [];
        for (let i = 0; i < groups.length; i++) {
            var g = groups[i];
            let header = {
                Name: g.items[0].ProductSolution,
                Header: true
            };
            items.push(header); // Add group header row
            for (let j = 0; j < g.items.length; j++) {
                items.push(g.items[j]);
            }
        }
        return items;
    }

// This function formats the GroupHeader with Category Class and disables it so that users’s are unable to click on them
function formatListItem(s, e) {
        var dataItem = e.data;
        if (dataItem.Header) {
            e.item.classList.add('category');
            e.item.classList.add('wj-state-disabled');
            e.item.disabled = true;
        }
    }

Using ShowGroups Property

With 2018 v3 release, this has been simplified with ShowGroups Property that has been added to ComboBox and List Controls which will enable Groups to be shown by default based in the Grouping applied on the item source.

You are no longer required to write the JavaScript code described in the above section. Grouping is possible just by setting the GroupBy property on the CollectionView and then setting the ShowGroups property to True on the ComboBox/ List control.

Razor Syntax

@(Html.C1().CollectionViewService<Product>().Id("cvProducts").GroupBy("ProductSolution").Bind(products))
            @(Html.C1().ListBox().Id("lbProducts").DisplayMemberPath("Name").ItemsSourceId("cvProducts").ShowGroups(true))
            @(Html.C1().ComboBox().IsEditable(true).Id("cbCities").DisplayMemberPath("Name").ItemsSourceId("cvProducts").ShowGroups(true)) 

Check out the additional resources below, and if you have any questions be sure to comment below. Happy Coding!

MVC ComboBox Grouping Sample: https://demos.componentone.com/ASPNET/MVCExplorer/ComboBox/Grouping

MVC List Grouping Sample: https://demos.componentone.com/ASPNET/MVCExplorer/ListBox/Grouping