Group items in popup in Blazor SplitButton Component

11 Aug 20211 minute to read

Items in popup can be grouped in Split Button by templating entire popup with ListView. To achieve grouping in ListView, check ListView Grouping documentation. To template ListView in popup, We have render the ListView Component in Split button popup using PopupContent property.

The following example illustrates how to group items in popup using ListView component.

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

<SfSplitButton Content="ClipBoard">
        <SfListView ID="listview" DataSource="@Data" SortOrder="Syncfusion.Blazor.Lists.SortOrder.Descending" TValue="ListData">
            <ListViewFieldSettings Text="Text" GroupBy="Category" TValue="ListData"></ListViewFieldSettings>
        <SplitButtonEvents OnClose="popupClose"></SplitButtonEvents>
@code {

    private void popupClose(BeforeOpenCloseMenuEventArgs args)


    public List<ListData> Data = new List<ListData>{
        new ListData{ Text = "Cut", Category = "Basic" },
        new ListData{ Text = "Copy", Category = "Basic" },
        new ListData{ Text = "Paste", Category = "Basic" },
        new ListData{ Text = "Paste as Formula", Category = "Advanced" },
        new ListData{ Text = "Paste as Hyperlink", Category = "Advanced" }

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

Output be like

Split Button Sample