Dynamic badge content in EJ2 JavaScript Badge control

10 May 20236 minutes to read

Badges in real-time needs to be updated dynamically based on the requirements. The following sample demonstrates how to update the badges content dynamically. Click the increment button to change the badge value.

// Datasource for listview, badge field is the class data for Badges
var dataSource = [
    { id: 'p_01', text: 'Primary', messages: '3 New', badge: 'e-badge e-badge-primary', icons: 'primary', type: 'Primary' },
    { id: 'p_02', text: 'Social', messages: '27 New', badge: 'e-badge e-badge-secondary', icons: 'social', type: 'Primary' },
    { id: 'p_03', text: 'Promotions', messages: '7 New', badge: 'e-badge e-badge-success', icons: 'promotion', type: 'Primary' },
    { id: 'p_04', text: 'Updates', messages: '13 New', badge: 'e-badge e-badge-info', icons: 'updates', type: 'Primary' },
    { id: 'p_05', text: 'Starred', messages: '', badge: '', icons: 'starred', type: 'All Labels' },
    { id: 'p_06', text: 'Important', messages: '2 New', badge: 'e-badge e-badge-danger', icons: 'important', type: 'All Labels' },
    { id: 'p_07', text: 'Sent', messages: '', badge: '', icons: 'sent', type: 'All Labels' },
    { id: 'p_08', text: 'Outbox', messages: '', badge: '', icons: 'outbox', type: 'All Labels' },
    { id: 'p_09', text: 'Drafts', messages: '7 New', badge: 'e-badge e-badge-warning', icons: 'draft', type: 'All Labels' },
];

var list = new ej.lists.ListView({
    // Bind listview datasource
    dataSource: dataSource,
    // Assign header title
    headerTitle: 'Inbox',
    // Enable header
    showHeader: true,
    // Assign template
    template: '<div class="listWrapper" style="width: inherit;height: inherit;"><span class="${icons} list_svg">&nbsp;</span>' +
        '<span class="list_text">${text} </span>' +
        '${if(messages !== "")}<span class="${badge}" style="float: right;margin-top: 16px;font-size: 12px;">${messages}</span>${/if}</div>',

    // Map fields
    fields: { groupBy: 'type' },
    // Bind actioncomplete event
    actionComplete: () => {
        badgeElements = Array.prototype.slice.call(document.getElementById('lists').getElementsByClassName('e-badge'));
    }
});
list.appendTo('#lists');

document.getElementById('button').addEventListener('click', function buttonClick() {
    badgeElements.forEach((element) => {
        element.textContent = (Number(element.textContent.split(' ')[0])) + 1 + ' New';
    })
});
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for Badge </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for Badge UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-notifications/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element">
            <div class="sample_container badge-list">
                <!-- Listview element -->
                <div id="lists"></div>
                <p class="crossline"></p>
                <span class="incr_button">
                  <button class="e-btn e-primary" id="button">Increment Badge Count</button>
                </span>
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>