We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

progress bar for server side actions.

Hi ,

Am not yet used progress bar . I want to show progress bar on my web page.

My project will run,with reference of WCF Service. With using reference, i am implemening and design the UI and my controller intract with service.
While saveigs data my service will take time and with 3 stages each stage it returns that stage results with form data set format. I need to show how much action completed and how much pending with help progress bar.

Thanks for the advance

3 Replies

CI Christopher Issac Sunder K Syncfusion Team March 20, 2019 10:13 AM UTC

Hi Sai,  

Thank you for contacting Syncfusion support. 

We have prepared a sample similar to your requirement by binding data to Grid from WCF service. By default we have rendered ProgressBar within a hidden container as shown below 

<div class="control" style="display:none; margin-top:100px;"> 
    <span class="txt">Current Progress</span> 
    @Html.EJ().ProgressBar("progress").Percentage(10).Height("20px").ClientSideEvents(e => e.Create("onCreate")) 
<div id="ControlRegion"> 
                                    .Columns(col => 
                                     }).ClientSideEvents(e => e.ActionBegin("onBegin").DataBound("onBound").ActionComplete("onComplete")) 

Grid component have events like actionBegin, actionComplete and dataBound to show the data fetching progress. So based on this we have modified the percentage of ProgressBar along with text through these events as shown below 

    function onBegin() { 
        $(".control").css("display", "block"); 
    function onCreate() { 
        this.setModel({ text: this.getPercentage() + " %" }); 
    function onBound() { 
        var progressObj = $("#progress").ejProgressBar("instance"); 
        setTimeout(function () {progressObj.setModel({ percentage: 100 }); 
            progressObj.setModel({ text: progressObj.getPercentage() + " %" }); 
        }, 500) 
    function onComplete() { 
        var progressObj = $("#progress").ejProgressBar("instance"); 
        progressObj.setModel({ percentage: 80 });  
        progressObj.setModel({ text: progressObj.getPercentage() + " %" }); 

Note: We have included setTimeout to show the progress for some time after action is completed. 

We have attached a sample for your reference which can be downloaded from the below link.  

Similarly you can render a progressBar in your page and change its value through 3 stages based on your requirement.  

Please let us know if you require any further assistance. 


SK sateesh kumar March 20, 2019 11:02 AM UTC

Hi Christo,

i am trying to know, how the code will work with help jsplay ground, before going to my project.
i copied and pasted shared java script and view in http://jsplayground.syncfusion.com/

am not able to run.getting ej grid issue.
 hope some reference java scripts need to add in head.

i will try with shared reference and get back.

Thanks for your assistance.

Sai Tanuj

PO Prince Oliver Syncfusion Team March 21, 2019 06:02 AM UTC

Hi Sai, 

Good day to you. 

As per your requirement, we attached JSplayground example with the same scenario representing progress bar during 3 different stages. Please find the sample in the below link 

Let us know if you need any further assistance. 


Live Chat Icon For mobile
Up arrow icon