Sorting Selected Items

[Andy Terbovich]

Hello,

If I have a multiselect dropdown box, how do I sort the display of the selected items in the dropdown, regardless of the order in which they were selected originally?

For example, if my dropdown box contains ints 1 to 10 and I select 3, 6, and 2, I want the displayed selections to show "2, 3, 6." instead, it shows 3,6,2. This continues when you re-enter the dropdown and select more options.

I tried to bind the control to a List<int> selectedItems variable and sorting the bound selected items, but it doesn't have any effect.

[Sureshkumar P]

Hi Andy,

You can sort your data in ascending order by setting the SortOrder property value to 'SortOrder.Ascending.' This will help you achieve your desired outcome.

Find the code example here:

<SfMultiSelect TValue="string[]" SortOrder="SortOrder.Ascending" TItem="Countries" AllowFiltering="true" Placeholder="e.g. Australia" Mode="@VisualMode.CheckBox" DataSource="@Country" ShowSelectAll="@ShowSelectAllCheckBox" EnableSelectionOrder="@EnableSelectionOrders" ShowDropDownIcon="@EnableDropDownIcon" FilterBarPlaceholder="Search countries" PopupHeight="350px">

    <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>

</SfMultiSelect>

 

 

@code {

    public bool ShowSelectAllCheckBox { get; set; } = true;

    public bool EnableSelectionOrders { get; set; } = true;

    public bool EnableDropDownIcon { get; set; } = true;

    public class Countries

    {

        public int Name { get; set; }

        public string Code { get; set; }

    }

    List<Countries> Country = new List<Countries>

    {

        new Countries() { Name = 1, Code = "AU" },

        new Countries() { Name = 2, Code = "BM" },

        new Countries() { Name = 3, Code = "CA" },

        new Countries() { Name = 4, Code = "CM" },

        new Countries() { Name = 5, Code = "DK" },

        new Countries() { Name = 6, Code = "FR" },

        new Countries() { Name = 7, Code = "FI" },

        new Countries() { Name = 8, Code = "DE" }

    };

}

Find the screenshot here:

Regards,

Sureshkumar P