Search results

Dynamic badge content

Badges in real-time needs to be updated dynamically based on the requirements. In this sample, using React states the badges content will be updated dynamically. Click the increment button to change the badge value.

Source
Preview
index.jsx
index.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
class BadgePortable extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (<span className={this.props.BadgeType} style={{ float: 'right', marginTop: '16px', fontSize: '12px' }}>{this.props.BadgeContent} New
            </span>);
    }
}
class App extends React.Component {
    constructor(data) {
        super(data);
        // Datasource for listview, badge field is the class data for Badges
        this.dataSource = [
            { id: 'p_01', text: 'Primary', badge: 'e-badge e-badge-primary', icons: 'primary', type: 'Primary' },
            { id: 'p_02', text: 'Social', badge: 'e-badge e-badge-secondary', icons: 'social', type: 'Primary' },
            { id: 'p_03', text: 'Promotions', badge: 'e-badge e-badge-success', icons: 'promotion', type: 'Primary' },
            { id: 'p_04', text: 'Updates', badge: 'e-badge e-badge-info', icons: 'updates', type: 'Primary' },
            { id: 'p_05', text: 'Starred', badge: '', icons: 'starred', type: 'All Labels' },
            { id: 'p_06', text: 'Important', badge: 'e-badge e-badge-danger', icons: 'important', type: 'All Labels' },
            { id: 'p_07', text: 'Sent', badge: '', icons: 'sent', type: 'All Labels' },
            { id: 'p_08', text: 'Outbox', badge: '', icons: 'outbox', type: 'All Labels' },
            { id: 'p_09', text: 'Drafts', badge: 'e-badge e-badge-warning', icons: 'draft', type: 'All Labels' },
        ];
        // Map fields
        this.fields = { groupBy: 'type' };
        this.state = {
            Primary: 3,
            Social: 27,
            Promotions: 7,
            Updates: 13,
            Drafts: 7,
            Important: 2
        };
    }
    listTemplate(data) {
        return (<div className='listWrapper' style={{ width: 'inherit', height: 'inherit' }}>
                <span className={`${data.icons} list_svg`}>&nbsp;</span>
                <span className='list_text'>{data.text}</span>
                {data.badge !== '' ?
            <BadgePortable BadgeContent={this.state[data.text]} BadgeType={data.badge}/> : ''}
            </div>);
    }
    onClick() {
        this.setState({
            Primary: this.getNewData(this.state.Primary), Drafts: this.getNewData(this.state.Drafts),
            Important: this.getNewData(this.state.Important), Social: this.getNewData(this.state.Social),
            Promotions: this.getNewData(this.state.Promotions), Updates: this.getNewData(this.state.Updates)
        });
    }
    getNewData(oldData) {
        return ++oldData;
    }
    render() {
        return (<div className="sample_container badge-list">
                
                <ListViewComponent id="lists" dataSource={this.dataSource} fields={this.fields} headerTitle='Inbox' showHeader={true} template={this.listTemplate.bind(this)}></ListViewComponent>
                <p className='crossline'></p>
                <span className='incr_button'>
                    <button className='e-btn e-primary' onClick={this.onClick.bind(this)}>Increment Badge Count</button>
                </span>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

interface IBadgeValuesProps {
    BadgeType: string;
    BadgeContent: string;
}


class BadgePortable extends React.Component<IBadgeValuesProps, {}> {
    constructor(props: any) {
        super(props);
    }

    public render() {
        return (
            <span className={this.props.BadgeType}
                style={{ float: 'right', marginTop: '16px', fontSize: '12px' }}>{this.props.BadgeContent} New
            </span>
        );
    }
}

interface IBadgeValues {
    Primary: number;
    Social: number;
    Promotions: number;
    Updates: number;
    Important: number;
    Drafts: number;
}

class App extends React.Component<any, IBadgeValues> {
    constructor(data: any) {
        super(data);
        this.state = {
            Primary: 3,
            Social: 27,
            Promotions: 7,
            Updates: 13,
            Drafts: 7,
            Important: 2
        }
    }

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

    // Map fields
    public fields: object = { groupBy: 'type' };

    public listTemplate(data: any): JSX.Element {
        return (
            <div className='listWrapper' style={{ width: 'inherit', height: 'inherit' }}>
                <span className={`${data.icons} list_svg`}>&nbsp;</span>
                <span className='list_text'>{data.text}</span>
                {
                    data.badge !== '' ?
                        <BadgePortable BadgeContent={(this.state as any)[data.text]} BadgeType={data.badge} /> : ''
                }
            </div>
        );
    }

    public onClick(): void {
        this.setState({
            Primary: this.getNewData(this.state.Primary), Drafts: this.getNewData(this.state.Drafts),
            Important: this.getNewData(this.state.Important), Social: this.getNewData(this.state.Social),
            Promotions: this.getNewData(this.state.Promotions), Updates: this.getNewData(this.state.Updates)
        })
    }

    public getNewData(oldData: number): number {
        return ++oldData;
    }

    render() {
        return (
            <div className="sample_container badge-list">
                {/* Listview element */}
                <ListViewComponent id="lists" dataSource={this.dataSource} fields={this.fields} headerTitle='Inbox' showHeader={true} template={this.listTemplate.bind(this) as any}></ListViewComponent>
                <p className='crossline'></p>
                <span className='incr_button'>
                    <button className='e-btn e-primary' onClick={this.onClick.bind(this)}>Increment Badge Count</button>
                </span>
            </div>
        );
    }
}
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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/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>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>