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"> </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="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-notifications/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.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>