I want to click Progress button and continue to spin Progress until all the operations that are executed are processed.

[TaeWook Kang]

I used the progress button, but when clicked, the progress is activated briefly and deactivated again after 1 to 2 seconds. What should I do?

<ejs-progressbutton id="testReceiveFromMMS" onclick="testFunction()" content="Contract" enableProgress="true" cssClass="e-success e-small"></ejs-progressbutton>
        <script>
            function testFunction() {
                var btn = document.getElementById('testReceiveFromMMS').ej2_instances[0];
                btn.iconCss = 'e-btn-sb-icon e-pause';
                btn.dataBind();
                btn.start();


                if (window.confirm("Do you want to receive new data from MMS?")) {
                    var jobNo = sessionStorage.getItem('JobKey');


                    $.ajax({
                        url: "/MMSData/ReceiveFromMMS",
                        type: "POST",
                        data: { 'sJobNo': jobNo },
                        success: function (msg) {
                            alert(msg);
                            //DataBinding();


                            btn.iconCss = 'e-btn-sb-icon e-play';
                            btn.dataBind();
                            btn.stop();
                        },
                        error: function (msg) {
                            alert(msg);


                            btn.iconCss = 'e-btn-sb-icon e-play';
                            btn.dataBind();
                            btn.stop();
                        }
                    });
                }
            }
        </script>

[YuvanShankar Arunagiri]

Hi TaeWook,

Using the start and stop method, we can start and stop the progress. In your sample, please set the duration property to achieve your requirement. Please refer to the below code snippet and API link.

API link: https://ej2.syncfusion.com/javascript/documentation/api/progress-button/#duration

<ejs-progressbutton id="testReceiveFromMMS" content="Contract" enableProgress="true" iconCss="" duration="1000" created="created" end="end" cssClass="e-success e-small"></ejs-progressbutton>

Please refer the attached sample and get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

Attachment: Index_16890869.zip

[TaeWook Kang]

I don't know how long my button works. It may take 10 seconds or 10 minutes. Is there any way to deal with it dynamically?

[YuvanShankar Arunagiri]

TaeWook,

To achieve your requirement, please set duration to the maximum value, and once your action is complete, using the progressComplete method, we can stop the progress/spinner of the progress button. Please refer to the below code snippet.

API link: https://ej2.syncfusion.com/javascript/documentation/api/progress-button/#progresscomplete

<ejs-progressbutton id="testReceiveFromMMS" content="Contract" enableProgress="true" duration="10000000" cssClass="e-success e-small"></ejs-progressbutton>

 

<ejs-button id="btn" cssClass="e-primary" content="Stop"></ejs-button>

 

<script>

    document.getElementById("btn").addEventListener('click', function () {

        var btn = ej.base.getComponent(document.querySelector("#testReceiveFromMMS"), "progress-btn");

        btn.progressComplete();

    });

</script>