React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Trace events of ProgressButton in React ProgressButton component

02 Feb 2023 / 1 minute to read

The ProgressButton component triggers events based on its actions. The events can be used as extension points to perform custom operations.

The events available in ProgressButton are fail, begin, progress, and end.

Source
Preview
app.jsx
index.html
app.tsx
Copied to clipboard
import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useState } from "react";
function App() {
    const [state, setState] = useState({
        eventTrace: ''
    });
    function begin(args) {
        updateEventLog(args);
    }
    function end(args) {
        updateEventLog(args);
    }
    function progress(args) {
        updateEventLog(args);
    }
    function fail(args) {
        updateEventLog(args);
    }
    function updateEventLog(args) {
        setState({ eventTrace: state.eventTrace + args.name + ' Event triggered. <br />' });
    }
    function btnClick() {
        setState({ eventTrace: '' });
    }
    return (<div className='control-section'>
            <div className='progress-btn-section'>
                <ProgressButtonComponent content='Progress' enableProgress={true} begin={begin} end={end} progress={progress} fail={fail}/>
            </div>
            <div className='property-section'>
                <table id='propertyTable' title='Event trace'>
                    <tbody>
                        <th>Event trace:-</th>
                        <tr>
                            <td dangerouslySetInnerHTML={{ __html: state.eventTrace }}/>
                        </tr>
                    </tbody>
                </table>
            </div>
            <ButtonComponent id='clear' cssClass='e-small' content='Clear' onClick={btnClick}/>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Progress Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="This demo for React Progress button has progress indicator and spinner. It supports texts, icons, styles, sizes, positions, and its customization." />
    <meta name="author" content="Syncfusion" />
    <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-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <link href="spinner.css" rel="stylesheet" />
    <link href="progress.css" rel="stylesheet" />
    <link href="icon.css" rel="stylesheet" />
    <link href="events.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='progress-button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import { ProgressButtonComponent, ProgressEventArgs } from '@syncfusion/ej2-react-splitbuttons';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useState } from "react";

function App() {
    const [state, setState] = useState({
        eventTrace: ''
    });

    function begin(args: ProgressEventArgs): void {
        updateEventLog(args);
    }
    function end(args: ProgressEventArgs): void {
        updateEventLog(args);
    }
    function progress(args: ProgressEventArgs): void {
        updateEventLog(args);
    }
    function fail(args: Event): void {
        updateEventLog(args);
    }
    function updateEventLog(args: any): void {
       setState({ eventTrace: state.eventTrace + args.name + ' Event triggered. <br />' });
    }

    function btnClick(): void {
        setState({ eventTrace: '' });
    }

    return (
        <div className='control-section'>
            <div className='progress-btn-section'>
                <ProgressButtonComponent content='Progress' enableProgress = {true} begin={begin} end={end} progress={progress} fail={fail}/>
            </div>
            <div className='property-section'>
                <table id='propertyTable' title='Event trace'>
                    <tbody>
                        <th>Event trace:-</th>
                        <tr>
                            <td dangerouslySetInnerHTML={{__html: state.eventTrace}}/>
                        </tr>
                    </tbody>
                </table>
            </div>
            <ButtonComponent id='clear' cssClass='e-small' content='Clear' onClick={btnClick}/>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));
Previous
Next