Search results

Display items count in group header in JavaScript (ES5) ListView control

17 Sep 2021 / 2 minutes to read

The ListView control 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.

Copied to clipboard
var template = '<div class="e-list-wrapper e-list-multi-line e-list-avatar">' +
    '<img class="e-avatar e-avatar-circle" src=${image} style="background:#BCBCBC" />' +
    '<span class="e-list-item-header">${Name}</span>' +
    '<span class="e-list-content">${contact}</span>' +

    //Define an array of JSON data
    var dataSource = [
        { Name: 'Nancy', contact:'(206) 555-985774', id: '1', image: '',  category: 'Experience'},
        { Name: 'Janet', contact: '(206) 555-3412', id: '2', image: '', category: 'Fresher' },
        { Name: 'Margaret', contact:'(206) 555-8122', id:'4', image: '', category: 'Experience' },
        { Name: 'Andrew ', contact:'(206) 555-9482', id: '5', image: '', category: 'Experience'},
        { Name: 'Steven', contact:'(71) 555-4848', id: '6', image: '', category: 'Fresher' },
        { Name: 'Michael', contact:'(71) 555-7773', id: '7', image: '', category: 'Experience' },
        { Name: 'Robert', contact:'(71) 555-5598', id: '8', image: '', category: 'Fresher' },
        { Name: 'Laura', contact:'(206) 555-1189', id: '9', image: '', category: 'Experience' },

    // Initialize ListView component
    var listObj = new ej.lists.ListView({

        //Set defined data to dataSource property
        dataSource: dataSource,

        width: 350,

        //Map the appropriate columns to fields property
        fields: { text: 'Name', groupBy: 'category' },
        cssClass: 'e-list-template',
        //Set customized template
        template: template,
        groupTemplate: '<div><span class="category">${items[0].category}</span> <span class="count"> ${items.length} Item(s)</span></div> '


    //Render initialized ListView component
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for ListView </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for ListView UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//" rel="stylesheet">
    <link href="//" rel="stylesheet">
    <link href="//" rel="stylesheet">
<script src="" type="text/javascript"></script>

    <div id="container">
        <div class="col-lg-12 control-section">

            <!-- ListView element -->
            <div id="List" tabindex="1">

var ele = document.getElementById('container');
if(ele) { = "visible";
<script src="index.js" type="text/javascript"></script>
Copied to clipboard
#container {
    visibility: hidden;

  #loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  #List {
      display: block;
      margin: auto;
      font-size: 15px;
      border: 1px solid;
      border-color: #ccc;
      border-color: #0000001f;
      width: 350px;

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

  #List .count{