Group items in Popup

7 Jun 20243 minutes to read

Grouped items are possible in SplitButton by templating entire popup with ListView. Check ListView grouping and create such items. Create ListView with id listview and provide element of the ListView as target of SplitButton to render it in popup area.

In this following example, ListView is created and its element is set as target for SplitButton.

CSHTML

<div>
    <ejs-listview enable="true" id="listview" dataSource="ViewBag.items" sortOrder="Descending">
        <e-listview-fieldsettings groupBy="category"></e-listview-fieldsettings>
    </ejs-listview>
    <ejs-splitbutton id="splitbtn" target='#listview' content='Clipboard'></ejs-splitbutton>
</div>

<style>
    .e-split-btn-wrapper{
        margin: 20px 20px 5px 5px;
    }
</style>

Listview.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.SplitButtons;

namespace EJ2CoreSampleBrowser.Controllers.Button
{
    public partial class ButtonController : Controller
    {
        public ActionResult SplitButton()
        {
            List<object> items = new List<object>();
            items.Add(new
            {
                text = "Cut",
                category = "Basic"
            });
            items.Add(new
            {
                text = "Copy",
                category = "Basic"
            });
            items.Add(new
            {
                text = "Paste",
                category = "Basic"
            });
            items.Add(new
            {
                text = "Paste as Formula",
                category = "Advanced"
            });
            items.Add(new
            {
                text = "Paste as Hyperlink",
                category = "Advanced"
            });
            ViewBag.items = items;
            return View();
        }
    }
}