MultiColumnComboBox - Issue with Grouping demo?

[Loy]

On the grouping demo page, I'm wondering if there's a bug.

When looking at the contents of the grouped combobox list, the grouping label of Argentina is shown as a column header instead of the black text to the right side.

[Peter Milchev]

Hello Loy,

This row you see is actually the sticky header where the current group name is located. For example, if you scroll down so Pedro Alfonso is the first visible item in the dropdown, then the value will be changed from Argentina to Brazil.

In case you need to modify the Fixed template, you can use the FixedGroupTemplate:

• https://docs.telerik.com/devtools/aspnet-ajax/controls/multiselect/functionality/templates#fixed-group-template 

Here are some styles you can use as a starting point:

<FixedGroupTemplate>
        <div class="k-group">#= data#</div>
    </FixedGroupTemplate>

<style>
    .k-group-header {
        text-align: right;
    }

    .k-dropdowngrid-popup .k-group-header {
        text-align: right;
        padding: 0
    }


    .k-dropdowngrid-popup.k-popup .k-group-header .k-group {
        color: #fff;
        background: #333;
    }

    .k-dropdowngrid-popup .k-group-header .k-group {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 2.5em;
        font-size: 9.996px;
        line-height: 14px;
        text-transform: uppercase;
    }

    .k-dropdowngrid-popup.k-popup .k-group-header .k-group::before {
        border-color: #333 #333333 transparent transparent;
    }

    .k-dropdowngrid-popup .k-group-header .k-group::before {
        display: block;
        content: " ";
        border-width: 7px;
        border-style: solid;
        position: absolute;
        left: -14px;
        bottom: 0;
    }
</style>

Regards,
Peter Milchev
Progress Telerik