Trace events of ProgressButton in JavaScript (ES5) ProgressButton control

08 May 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

index.js

index.html

styles.css

var progressBtn = new ej.splitbuttons.ProgressButton({ 
    content: 'Progress', 
    enableProgress: true, 
    begin: function(args) {
        updateEventLog(args);
    },
    end: function(args) {
        updateEventLog(args);
    },
    progress: function(args) {
        updateEventLog(args);
    },
    fail: function(args) {
        updateEventLog(args);
    }
    });

progressBtn.appendTo('#progressbtn');

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

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

function updateEventLog(args) {
    var propertyElem = 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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.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;
}