Search results

Grouping

The ListView supports to wrap the nested element into a group based on the category. The category of each list item can be mapped with GroupBy field in the data table, that also supports single-level navigation.

In the following sample, The cars are grouped based on its category by using the GroupBy field in ListViewFieldSettings.

@using Syncfusion.EJ2.Blazor.Lists
<EjsListView DataSource="@DataSource">
    <ListViewFieldSettings Id="Id" Text="Text" GroupBy="Type"></ListViewFieldSettings>
</EjsListView>

@code {
    public string HeaderTitle = "Listview";

    List<DataModel> DataSource = new List<DataModel>()
{
        new DataModel { Id = "1", Text = "1", Type = "Odd"},
        new DataModel { Id = "2", Text = "2", Type = "Even"},
        new DataModel{ Id = "3", Text = "3", Type = "Odd"},
        new  DataModel{ Id = "4", Text = "4", Type = "Even"},
    };

    class DataModel
    {
        public string Id { get; set; }
        public string Text { get; set; }
       public string Type { get; set; }
    }

}

ListView - Grouping