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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

progress bar for server side actions.

Thread ID:

Created:

Updated:

Platform:

Replies:

143416 Mar 19,2019 06:32 PM UTC Mar 21,2019 06:02 AM UTC ASP.NET MVC 3
loading
Tags: Progressbar
sateesh kumar
Asked On March 19, 2019 06:32 PM UTC

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 [Syncfusion]
Replied On 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> 
<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.  


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. 

Thanks, 
Christo 


sateesh kumar
Replied On 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

Prince Oliver [Syncfusion]
Replied On 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. 

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;