Change the text content and styles of the ProgressButton during progress

1 Mar 20221 minute to read

You can change the text content and styles of the ProgressButton during progress state by changing the text content and the cssClass property at the begin and end events.

CSHTML

<ejs-progressbutton id="upload" content="Upload" enableProgress="true" cssClass="e-hide-spinner" duration="4000" begin="begin" end="end"></ejs-progressbutton>

<script>
    function begin() {
        this.content = 'Uploading...';
        this.cssClass = 'e-hide-spinner e-info';
        this.dataBind();
    }

    function end() {
        this.content = 'Success';
        this.cssClass = 'e-hide-spinner e-success';
        this.dataBind();
        setTimeout(() => {
            this.content = 'Upload';
            this.cssClass = 'e-hide-spinner';
            this.dataBind();
        }, 500)
    }
</script>

Default.cs

public ActionResult Default()
{
        return View();
}