Search results

Group items in Popup

Items in popup can be grouped in SplitButton by templating entire popup with ListView. To achieve grouping in ListView, check ListView Grouping documentation. To template ListView in popup, create ListView with ID listview and provide it as Target for SplitButton.

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

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

<EjsSplitButton Target="#listview" Content="ClipBoard" ></EjsSplitButton>
<EjsListView ID="listview" DataSource="@Data" SortOrder="SortOrder.Descending">
    <ListViewFieldSettings Text="Text" GroupBy="Category"></ListViewFieldSettings>
</EjsListView>

@code {
    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