HelpBot Assistant

How can I help you?

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.

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