Sorting in Dropdown List

7 Aug 20232 minutes to read

The Sorting enables you to sort data in the Ascending or Descending order. To enable sorting in the DropDownList, set the SortOrder property to the required value.

The available type of sort orders are:

SortOrder	Description
None	The data source is not sorting.
Ascending	The data source is sorting with ascending order.
Descending	The data source is sorting with descending order.

In the following demonstration sample, the items in the datasource are shuffled in random order but decide whether the items to be listed in ascending or descending order alphanumerically in the popup.

CSHTML

@using Syncfusion.Blazor.DropDowns

 <SfDropDownList TValue="string" TItem="GameFields" PopupHeight="230px" Width="300px" SortOrder="SortOrder.Descending" Placeholder="Select a game" DataSource="@Games">
   <DropDownListFieldSettings Text="Text" Value="ID"/>
 </SfDropDownList>
@code{
 public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    public List<GameFields> Games = new List<GameFields>()
    {
        new GameFields(){ ID= "Game1", Text= "Rugby" },
        new GameFields(){ ID= "Game2", Text= "Snooker" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
        new GameFields(){ ID= "Game5", Text= "Football" },
        new GameFields(){ ID= "Game6", Text= "Tennis" },
        new GameFields(){ ID= "Game7", Text= "Hockey" },
        new GameFields(){ ID= "Game8", Text= "American Football"},
        new GameFields(){ ID= "Game9", Text= "Badminton" },
        new GameFields(){ ID= "Game10",Text= "Golf"}
    };
}