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