Integrate badge into listview in React Badge component
30 Jan 202311 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 * as React from "react";
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
// Datasource for listview, badge field is the class data for Badges
let 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' },
];
// Map fields
let fields = { groupBy: 'type' };
// Assign template
function template(data) {
return (<div className='listWrapper' style={{ width: 'inherit', height: 'inherit' }}>
<span className={`${data.icons} list_svg`}> </span>
<span className='list_text'>{data.text}</span>
<span className={`${data.badge}`} style={{ float: 'right', marginTop: '16px', fontSize: '12px' }}>{data.messages}</span>
</div>);
}
function onActionComplete() {
let list = document.getElementById('lists').getElementsByClassName('e-list-group-item')[0];
list.style.display = 'none';
}
return (<div className="sample_container badge-list">
{/* Listview element */}
<ListViewComponent id="lists" dataSource={dataSource} fields={fields} headerTitle='Inbox' showHeader={true} template={template} actionComplete={onActionComplete.bind(this)}></ListViewComponent>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
// 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' },
];
// Map fields
let fields: object = { groupBy: 'type' };
// Assign template
function template(data: any): JSX.Element {
return (
<div className='listWrapper' style={{ width: 'inherit', height: 'inherit' }}>
<span className={`${data.icons} list_svg`}> </span>
<span className='list_text'>{data.text}</span>
<span className={`${data.badge}`} style={{ float: 'right', marginTop: '16px', fontSize: '12px' }}>{data.messages}</span>
</div>
);
}
function onActionComplete() {
let list: HTMLElement = document.getElementById('lists').getElementsByClassName('e-list-group-item')[0] as HTMLElement;
list.style.display = 'none';
}
return (
<div className="sample_container badge-list">
{/* Listview element */}
<ListViewComponent id="lists" dataSource={dataSource} fields={fields} headerTitle='Inbox' showHeader={true} template={template as any} actionComplete={onActionComplete.bind(this)} ></ListViewComponent>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 React Badge Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<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-react-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>
<link rel="stylesheet" href="index.css" />
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div></div>
</body>
</html>