Sorting Selected Items

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.




1 Reply

SP Sureshkumar P Syncfusion Team January 30, 2023 11:00 AM UTC

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


Loader.
Up arrow icon