Search results

How To

The following section explains how to customize various aspects of the ProgressButton.

Change progress button text content and styles during progress state

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.

tagHelper
default.cs
@section ControlsSection{
    <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>
public IActionResult Default()
{
        return View();
}

Hide spinner

You can hide spinner in the ProgressButton by setting the e-hide-spinner property to cssClass.

tagHelper
default.cs
<ejs-progressbutton id="progress" content="Progress" enableProgress="true" cssClass="e-hide-spinner"></ejs-progressbutton>
public IActionResult Default()
{
        return View();
}

Customize progress using cssClass

You can customize the background filler UI using the cssClass property.

  • Adding e-vertical to cssClass shows vertical progress.
  • Adding e-progress-top to cssClass shows progress at the top.

You can also show reverse progress by adding custom class to the cssClass property.

tagHelper
default.cs
@section ControlsSection {
    <ejs-progressbutton id="vprogress" content="Vertical Progress" enableProgress="true" cssClass="e-hide-spinner e-vertical" duration="4000"></ejs-progressbutton>
    <ejs-progressbutton id="tprogress" content="Progress Top" enableProgress="true" cssClass="e-hide-spinner e-progress-top" duration="4000"></ejs-progressbutton>
    <ejs-progressbutton id="rprogress" content="Reverse Progress" enableProgress="true" cssClass="e-hide-spinner e-reverse-progress" duration="4000"></ejs-progressbutton>
}
<style>
    .e-reverse-progress .e-progress {
        right: 0;
        left: auto;
    }

    button {
        margin: 25px;
    }
</style>
public IActionResult Default()
{
        return View();
}