Search results

Group popup items with ListView component

Header in popup items is possible in DropdownButton by templating entire popup with ListView. Create ListView with ID listview and provide it as a Target for DropDownButton.

In the following example, ListView element is given as Target to DropDownButton and header can be achieved by GroupBy property.

@using Syncfusion.EJ2.Blazor.SplitButtons
@using Syncfusion.EJ2.Blazor.Lists

<EjsDropDownButton Target="#listview" CssClass="e-caret-hide" IconCss="e-icons e-down"></EjsDropDownButton>
<EjsListView ID="listview" DataSource="@Data" ShowCheckBox="true">
    <ListViewFieldSettings Text="Text" GroupBy="Category"></ListViewFieldSettings>
</EjsListView>

@code {
    public List<ListData> Data = new List<ListData>{
        new ListData{ Class = "data", Text = "Print", Id = "data1", Category = "Customize Quick Access Toolbar" },
        new ListData{ Class = "data", Text = "Save As", Id = "data2", Category = "Customize Quick Access Toolbar" },
        new ListData{ Class = "data", Text = "Update Folder", Id = "data3", Category = "Customize Quick Access Toolbar"},
        new ListData{ Class = "data", Text = "Reply", Id = "data4", Category = "Customize Quick Access Toolbar" }
};

    public class ListData
    {
        public string Text { get; set; }
        public string Id { get; set; }
        public string Class { get; set; }
        public string Category { get; set; }
    }
}

<style>
    .e-down::before {
    content: '\e969';
}
</style>

Output be like

Button Sample