Search results

Trace events of ProgressButton in JavaScript (ES5) Progress Button control

14 Apr 2021 / 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
Copied to clipboard
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 />');
}
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/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>
Copied to clipboard
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;
}