Group popup items with ListView component

11 Apr 20223 minutes to read

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.Lists;
<div>
   @Html.EJS().ListView("listview").Enable(true).DataSource((IEnumerable<object>)ViewBag.listdata).ShowCheckBox(true).Fields(new ListViewFieldSettings { GroupBy = "category", Text = "text" }).Render()
   @Html.EJS().DropDownButton("ddbtn").CssClass("e-caret-hide").IconCss("e-icons e-down").Target("#listview").Render()
</div>

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

    #listview {
        display: block;
        max-width: 600px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }

    button {
        margin: 30% 5px 20px 30%;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.Button
{
    public partial class ButtonController : Controller
    {
        public ActionResult DropDownButton()
        {
            List<object> listdata = new List<object>();
            listdata.Add(new
            {
                text = "Print",
                id = "data1",
                category = "Customize Quick Access Toolbar"
            });
            listdata.Add(new
            {
                text = "Save As",
                id = "data2",
                category = "Customize Quick Access Toolbar"
            });
            listdata.Add(new
            {
                text = "Update Folder",
                id = "data3",
                category = "Customize Quick Access Toolbar"
            });
            listdata.Add(new
            {
                text = "Reply",
                id = "data4",
                category = "Customize Quick Access Toolbar"
            });
            ViewBag.listdata = listdata;
            return View();
        }
    }
}