progress bar for server side actions.

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

Reply | Reply with quote

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

<span class="txt">Current Progress</span>

@Html.EJ().ProgressBar("progress").Percentage(10).Height("20px").ClientSideEvents(e => e.Create("onCreate"))

</div>

<br/>

@(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

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

Reply | Reply with quote

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

Reply | Reply with quote

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

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

Let us know if you need any further assistance.

Regards,

Prince

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US