MultiColumnComboBox - Issue with Grouping demo?

1 Answer 11 Views
MultiColumnComboBox
Loy
Top achievements
Rank 1
Loy asked on 29 Apr 2021, 06:30 PM

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.

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 04 May 2021, 11:25 AM

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:

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
MultiColumnComboBox
Asked by
Loy
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Share this question
or