Trace events of progress button in EJ2 JavaScript Progress button control

10 May 20236 minutes 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.

import { Button } from '@syncfusion/ej2-buttons';
import { ProgressButton, ProgressEventArgs } from '@syncfusion/ej2-splitbuttons';

let progressBtn: ProgressButton = new ProgressButton({
    content: 'Progress',
    enableProgress: true,
    begin: (args: ProgressEventArgs) => {
        updateEventLog(args);
    },
    end: (args: ProgressEventArgs) => {
        updateEventLog(args);
    },
    progress: (args: ProgressEventArgs) => {
        updateEventLog(args);
    },
    fail: (args: Event) => {
        updateEventLog(args);
    }
    }, '#progressbtn');

let clear: Button = new Button({ cssClass: 'e-small'});
clear.appendTo('#clear');

clear.element.onclick = () => {
    let propertyElem: HTMLElement = document.getElementById('propertyTable');
    propertyElem.getElementsByTagName('td')[0].innerHTML = '';
}

function updateEventLog(args: any): void {
    let propertyElem: HTMLElement = document.getElementById('propertyTable');
    propertyElem.getElementsByTagName('td')[0].insertAdjacentHTML('beforeend', args.name + ' Event triggered. <br />');
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 ProgressButton</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This sample is to customize progress indicator with top, reverse and vertical in the progress button">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/24.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="control-section">
            <div class="progress-btn-section">
                <button id="progressbtn"></button>
            </div>
            <div class="property-section">
                <table id="propertyTable" title="Event trace">
                    <tbody>
                        <tr><th>Event trace:-</th>
                        </tr><tr>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button id="clear">Clear</button>
        </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>
html, body, .control-section {
    height: 95%;
}

.progress-btn-section {
    text-align: center;
    float: left;
}

.property-section {
    overflow: auto;
    width: 40%;
    height: 330px;
    float: right;
    font-family: monospace;
}

.property-section th {
    text-align: left;
}

#clear {
    float: right;
    clear: both;
}