progress bar for server side actions.

[sateesh kumar]

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.

  

Query: 

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

[Christopher Issac Sunder K]

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> 

<br/> 

<div id="ControlRegion"> 

    @(Html.EJ().Grid<object>("FlatGrid") 

                                    .Datasource("http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders") 

                                    .AllowPaging() 

                                    .Columns(col => 

                                     { 

                                         col.Field("OrderID").Add(); 

                                         col.Field("EmployeeID").Add(); 

                                         col.Field("CustomerID").Add(); 

                                         col.Field("ShipCountry").Add(); 

                                         col.Field("Freight").Add(); 

                                     }).ClientSideEvents(e => e.ActionBegin("onBegin").DataBound("onBound").ActionComplete("onComplete")) 

    ) 

 

</div> 

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 

<script> 

    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() + " %" }); 

        

    } 

</script> 

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.  

http://www.syncfusion.com/downloads/support/forum/143416/ze/SyncfusionProgressBar-1489268851 

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

UG: https://help.syncfusion.com/aspnetmvc/progressbar/getting-started 

Please let us know if you require any further assistance. 

Thanks, 

Christo 

[sateesh kumar]

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

[Prince Oliver]

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 

JSPlayground link: https://jsplayground.syncfusion.com/czuowgxp  

Let us know if you need any further assistance. 

Regards, 

Prince