Integrate badge into listview in EJ2 TypeScript Badge control
10 May 20235 minutes to read
The badges can be integrated with the listview
component to indicate new notification with colour based on priority.
In the following sample, default
badges are used and there is no need to customize the badge size. The component will automatically adjust the size based on the container element.
import { ListView } from '@syncfusion/ej2-lists';
// Datasource for listview, badge field is the class data for Badges
let dataSource: { [key: string]: Object }[] = [
{ 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' },
];
let list: ListView = new 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>' +
'<span class="${badge}" style="float: right;margin-top: 16px;font-size: 12px;">${messages}</span></div>',
// Map fields
fields: { groupBy: 'type' },
// Bind actioncomplete event
actionComplete: () => {
let list: HTMLElement = <HTMLElement>document.getElementById('lists').getElementsByClassName('e-list-group-item')[0];
list.style.display = 'none';
}
});
list.appendTo('#lists');
<!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/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-notifications/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'>
<div class="sample_container badge-list">
<!-- Listview element -->
<div id="lists"></div>
</div>
</div>
</div>
</body>
</html>