Search results

sorting and grouping

Sorting

The ListBox supports sorting of available items in the alphabetical order that can be either ascending or descending. This can achieved using SortOrder property. Sort order can be None, Ascending or Descending.

In the following example, the SortOrder is set as Descending.

@using Syncfusion.EJ2.Blazor.DropDowns

<EjsListBox TValue="string[]" DataSource="@CountryData" SortOrder="Descending">
  <ListBoxFieldSettings Text="Name" Value="Code" />
</EjsListBox>

@code {
    public List<CountryCode> CountryData = new List<CountryCode> {
        new CountryCode{ Name = "Australia", Code = "AU" },
        new CountryCode{ Name = "Bermuda", Code = "BM" },
        new CountryCode{ Name = "Canada", Code = "CA" },
        new CountryCode{ Name = "Cameroon", Code = "CM" },
        new CountryCode{ Name = "Denmark", Code = "DK" },
        new CountryCode{ Name = "France", Code = "FR" },
        new CountryCode{ Name = "Finland", Code = "FI" },
        new CountryCode{ Name = "Germany", Code = "DE" },
        new CountryCode{ Name = "Hong Kong", Code = "HK" }
    };
    public class CountryCode {
      public string Name { get; set; }
      public string Code { get; set; }
    }
}

Output will be shown as

ListBox

Grouping

The ListBox supports to wrap the nested element into a group based on its category. The category of each list item can be mapped with GroupBy field in the data table.

In the following example, vegetables are grouped based on its category.

@using Syncfusion.EJ2.Blazor.DropDowns

<EjsListBox TValue="string[]" DataSource="@VegetableData">
  <ListBoxFieldSettings GroupBy = "Category" Text="Vegetable" Value="Id" />
</EjsListBox>

@code {
    public List<VegetableDetail> VegetableData = new List<VegetableDetail> {
       new VegetableDetail{ Vegetable = "Cabbage", Category = "Leafy and Salad", Id = "item1" },
       new VegetableDetail{ Vegetable = "Spinach", Category = "Leafy and Salad", Id = "item2" },
       new VegetableDetail{ Vegetable = "Wheat grass", Category = "Leafy and Salad", Id = "item3" },
       new VegetableDetail{ Vegetable = "Yarrow", Category = "Leafy and Salad", Id = "item4" },
       new VegetableDetail{ Vegetable = "Pumpkins", Category = "Leafy and Salad", Id = "item5" },
       new VegetableDetail{ Vegetable = "Chickpea", Category = "Beans", Id = "item6" },
       new VegetableDetail{ Vegetable = "Green bean", Category = "Beans", Id = "item7" },
       new VegetableDetail{ Vegetable = "Horse gram", Category = "Beans", Id = "item8" },
       new VegetableDetail{ Vegetable = "Garlic", Category = "Bulb and Stem", Id = "item9" },
       new VegetableDetail{ Vegetable = "Nopal", Category = "Bulb and Stem", Id = "item10" },
       new VegetableDetail{ Vegetable = "Onion", Category = "Bulb and Stem", Id = "item11" }
    };

    public class VegetableDetail {
      public string Vegetable { get; set; }
      public string Category { get; set; }
      public string Id { get; set; }
    }
}

Output will be shown as

ListBox

Contents
Contents