Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
350
Group Sorting Direction in igx-combo Component
posted

Hello,

I'm experiencing an issue with the igx-combo component in my Angular application. The component automatically sorts groups in ascending order based on the group key. I would like to disable it entirely, but I haven't found a way to achieve this.


Here is the relevant part of my code:

@Input("groupSortingDirection") groupSortingDirection = SortingDirection.None;

<igx-combo #combobox ... [groupSortingDirection]="groupSortingDirection" ...>...</igx-combo>

 

  • 460
    Offline posted

    Hello,

    Thank you for reaching out about the sorting behavior of the igx-combo component.

    I have been looking into your question and I understand you'd like to disable the automatic sorting of groups based on the group key. You can achieve this by utilizing the groupSortingDirection property available in the IgxComboComponent.

    Here’s how you can implement it:

    <div class="sample-wrapper">
        <igx-combo
            #combo
            class="combo"
            [data]="cities"
            valueKey="id"
            displayKey="name"
            groupKey="country"
            [groupSortingDirection]="groupSortingDirection"
        >
        </igx-combo>
    </div>

    In your component's TypeScript file, ensure you define the groupSortingDirection variable and set it to SortingDirection.None, like so:

    public groupSortingDirection = SortingDirection.None;

    This property allows you to specify the sorting direction of groups in the combo box. By setting it to SortingDirection.None, you effectively disable the automatic sorting of groups based on the group key.

    By implementing the above changes, the groups in your igx-combo component will no longer be automatically sorted.

    The described scenario could be observed here:

     

    In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

    If you require any further assistance on the matter, please let me know.

    Regards,

    Georgi Anastasov

    Entry Level Software Developer

    Infragistics