Show Items Count in Group Header

2 Mar 20226 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>";

    var groupTemplate = "<div><span class='category'>${items[0].category}</span> <span class='count'> ${items.length} Item(s)</span></div>";
}

<ejs-listview id="List" dataSource="(IEnumerable<object>)ViewBag.dataSource" template="@template" groupTemplate="@groupTemplate">
    <e-listview-fieldsettings GroupBy="category" text="Name"></e-listview-fieldsettings>
</ejs-listview>


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