Group popup items with ListView component

11 Apr 20224 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.

<div>
  <ejs-listview enable="true" id="listview" dataSource="ViewBag.listdata" showCheckBox="true">
      <e-listview-fieldsettings text="text" groupBy="category"></e-listview-fieldsettings>
  </ejs-listview>
  <ejs-dropdownbutton id="ddbtn" target='#listview' iconCss="e-icons e-down" cssClass="e-caret-hide"></ejs-dropdownbutton>
</div>

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

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

</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();
        }
    }
}