Show Items Count in Group Header

2 Mar 20225 minutes to read

The ListView component supports wrapping list items into a group based on the category. The category of each list item can be mapped with groupBy field of the data source. You can display grouped list items count in the list-header using the group header template. Refer to the following code sample to display grouped list item count.

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists;
@{
    var template = "<div class='settings'>"
    + "<div id='postContainer'><div id='postImg'>"
    + "<img src=${image} style='height:35px;width:35px;border-radius:50%; border: 1px solid #ccc;' /></div>"
    + "<div id='content'><div class='name'>${Name}</div><div id='info'>${contact}</div></div></div>";
}
@Html.EJS().ListView("List").DataSource((IEnumerable<object>)ViewBag.dataSource).Fields(new ListViewFieldSettings { GroupBy = "category", Text = "Name" }).GroupTemplate("<div><span class='category'>${items[0].category}</span> <span class='count'> ${items.length} Item(s)</span></div>").Template(template).Render()


<style>
 .count{
    float:right;
  }
  #List {
      display: block;
      margin: auto;
      border: 1px solid;
      border-color: #ccc;
      border-color: rgba(0, 0, 0, 0.12);
      width: 350px;
  }

  #List .settings {
      height: auto;
  }

  #List .e-list-group-item {
    height: 56px;
    line-height: 56px;
  }

  #List .e-list-item {
      height: 70px;
      padding: 0;
      cursor: pointer;
      box-sizing: border-box;
  }
  #List .e-list-header .e-text {
      font-family: sans-serif;
      font-size: 18px;
      line-height: 26px;
  }
  #List #content {
    margin: 9px 0 0 15px;
  }
  #List .name {
      font-size: 14px;
      line-height: 25px;
      font-weight: 500;
  }

  #info {
    line-height: 20px;
    font-size: 12px;
  }

  #postImg {
     margin: 15px 9px 9px 9px;
 }

  #postContainer {
  width: inherit;
  margin: auto;
  display: inline-flex;
}
</style>
<style>
    #text {
        margin-left: 10px;
        margin-top: 20px;
    }

    #element {
        max-width: 350px;
        margin: auto;
        margin-top: 10px;
        display: block;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>

List.cs

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

namespace WebApplication1.Controllers
{
    public class ListViewController : Controller
    {
        public IActionResult list()
        {
            List<object> listdata = new List<object>();
            listdata.Add(new { Name = "Nancy", contact = "(206) 555-985774", id = "1", image = "https://ej2.syncfusion.com/demos/src/grid/images/1.png", category = "Experience" });
            listdata.Add(new { Name = "Janet", contact = "[phone]", id = "2", image = "https://ej2.syncfusion.com/demos/src/grid/images/3.png", category = "Fresher" });
            listdata.Add(new { Name = "Margaret", contact = "[phone]", id = "4", image = "https://ej2.syncfusion.com/demos/src/grid/images/4.png", category = "Experience" });
            listdata.Add(new { Name = "Andrew ", contact = "[phone]", id = "5", image = "https://ej2.syncfusion.com/demos/src/grid/images/2.png", category = "Experience" });
            listdata.Add(new { Name = "Steven", contact = "(71) 555-4848", id = "6", image = "https://ej2.syncfusion.com/demos/src/grid/images/5.png", category = "Fresher" });
            listdata.Add(new { Name = "Michael", contact = "(71) 555-7773", id = "7", image = "https://ej2.syncfusion.com/demos/src/grid/images/6.png", category = "Experience" });
            listdata.Add(new { Name = "Robert", contact = "(71) 555-5598", id = "8", image = "https://ej2.syncfusion.com/demos/src/grid/images/7.png", category = "Fresher" });
            listdata.Add(new { Name = "Laura", contact = "[phone]", id = "9", image = "https://ej2.syncfusion.com/demos/src/grid/images/8.png", category = "Experience" });
            ViewBag.dataSource = listdata;
            return View();
        }
    }
}