Skip to content

Commit ccd4ccd

Browse files
pepinho24pepinho24
authored
docs(progressarea): Add an example for template after Q2 2015
1 parent 3c1af29 commit ccd4ccd

File tree

1 file changed

+118
-2
lines changed

1 file changed

+118
-2
lines changed

‎controls/progressarea/progress-template.md

Lines changed: 118 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,129 @@ You can let **RadProgressArea** automatically locate and update the values of th
3434
|Speed|Speed|
3535
|CancelButton|Cancel Button|
3636

37-
\* As of **Q2 2015** the *PrimaryProgressBarInnerDiv* and *SecondaryProgressBarInnerDiv* IDs are renamed respectively to **PrimaryProgressBarElement** and **SecondaryProgressBarElement** due to the new Lightweight rendering of the control.
37+
>note As of **Q2 2015** the *PrimaryProgressBarInnerDiv* and *SecondaryProgressBarInnerDiv* IDs are renamed respectively to **PrimaryProgressBarElement** and **SecondaryProgressBarElement** due to the new Lightweight rendering of the control.
38+
>
3839
3940
You can also update the values of elements in your template using the client-side [OnClientProgressBarUpdating]({%slug progressarea/client-side-programming/onclientprogressbarupdating%}) and [OnClientProgressUpdating]({%slug progressarea/client-side-programming/onclientprogressupdating%}) events to bind the values of custom controls you add in the template.
4041

4142
## Example
4243

43-
The following example shows a **RadProgressArea** with a progress template and **OnClientProgressBarUpdating** event handler:
44+
````ASPNET
45+
<telerik:RadScriptManager runat="server" ID="rsm" />
46+
<telerik:RadProgressManager runat="server" ID="rpm" />
47+
Progress:<br />
48+
<asp:Button CssClass="button" ID="buttonSubmit" runat="server" Text="Start Processing" OnClick="buttonSubmit_Click"></asp:Button>
49+
<br />
50+
<telerik:RadProgressArea runat="server" ID="rpa">
51+
<ProgressTemplate>
52+
<ul class="ruProgress">
53+
<li class="ruProgressHeader"><span id="rpa_Panel_ProgressAreaHeader"></span></li>
54+
<li class="ruFilePortion">
55+
<div id="<%= rpa.ClientID %>_Panel_PrimaryProgressBarElement" class="ruBar">
56+
<div id="<%= rpa.ClientID %>_Panel_PrimaryProgressElement">
57+
<!-- -->
58+
</div>
59+
</div>
60+
Uploaded <span id="rpa_Panel_PrimaryPercent"></span>% (<span id="<%= rpa.ClientID %>_Panel_PrimaryValue"></span> ) Total <span id="<%= rpa.ClientID %>_Panel_PrimaryTotal"></span></li>
61+
<li class="ruFileCount">
62+
<div id="<%= rpa.ClientID %>_Panel_SecondaryProgressBarElement" class="ruBar">
63+
<div id="<%= rpa.ClientID %>_Panel_SecondaryProgressElement">
64+
<!-- -->
65+
</div>
66+
</div>
67+
Uploaded files: <span id="<%= rpa.ClientID %>_Panel_SecondaryPercent"></span>% (<span id="<%= rpa.ClientID %>_Panel_SecondaryValue"></span>) Total files: <span id="<%= rpa.ClientID %>_Panel_SecondaryTotal"></span></li>
68+
<li class="ruCurrentFile">Uploading file: <span id="<%= rpa.ClientID %>_Panel_CurrentOperation"></span></li>
69+
<li class="ruTimeSpeed">Elapsed time: <span id="<%= rpa.ClientID %>_Panel_TimeElapsed"></span>&nbsp;Estimated time: <span id="<%= rpa.ClientID %>_Panel_TimeEstimated"></span>&nbsp;Speed: <span id="<%= rpa.ClientID %>_Panel_Speed"></span></li>
70+
</ul>
71+
</ProgressTemplate>
72+
</telerik:RadProgressArea>
73+
````
74+
75+
````C#
76+
77+
protected void buttonSubmit_Click(object sender, System.EventArgs e)
78+
{
79+
UpdateProgressContext();
80+
}
81+
82+
protected void UpdateProgressContext()
83+
{
84+
int mySteps = 3;
85+
int myRecords = 20;
86+
RadProgressContext progress = RadProgressContext.Current;
87+
progress.Speed = "N/A";
88+
89+
progress.PrimaryTotal = mySteps;
90+
progress.PrimaryValue = 0;
91+
progress.PrimaryPercent = 0;
92+
93+
progress.SecondaryTotal = myRecords;
94+
progress.SecondaryValue = 0;
95+
progress.SecondaryPercent = 0;
96+
97+
for (int i = 1; i <= mySteps; i++)
98+
{
99+
progress.PrimaryPercent = Math.Round(i * 100 / (double)mySteps, 0);
100+
progress.PrimaryValue = i;
101+
progress.SecondaryTotal = myRecords;
102+
103+
for (int j = 1; (j <= myRecords); j++)
104+
{
105+
progress.SecondaryValue = j;
106+
progress.SecondaryPercent = Math.Round((j * (100 / (double)myRecords)), 0);
107+
progress.CurrentOperationText = ("Step " + i.ToString() + " Record " + j.ToString());
108+
// Stall the current thread for 0.1 seconds
109+
System.Threading.Thread.Sleep(100);
110+
}
111+
}
112+
}
113+
114+
````
115+
````VB
116+
117+
Protected Sub buttonSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
118+
UpdateProgressContext()
119+
End Sub
120+
121+
Protected Sub UpdateProgressContext()
122+
Dim mySteps As Integer = 3
123+
Dim myRecords As Integer = 20
124+
125+
Dim progress As RadProgressContext = RadProgressContext.Current
126+
progress.Speed = "N/A"
127+
128+
With progress
129+
.PrimaryTotal = mySteps
130+
.PrimaryValue = 0
131+
.PrimaryPercent = 0
132+
133+
.SecondaryTotal = myRecords
134+
.SecondaryValue = 0
135+
.SecondaryPercent = 0
136+
End With
137+
138+
For i As Integer = 1 To mySteps
139+
With progress
140+
.PrimaryValue = i
141+
.PrimaryPercent = Math.Round(i * 100 / mySteps, 0)
142+
.SecondaryTotal = myRecords
143+
End With
144+
145+
For j As Integer = 1 To myRecords
146+
progress.SecondaryValue = j
147+
progress.SecondaryPercent = Math.Round(j * 100 / myRecords, 0)
148+
149+
progress.CurrentOperationText = "Step " & i.ToString() & " Record " & j.ToString
150+
151+
'Stall the current thread for 0.1 seconds
152+
System.Threading.Thread.Sleep(100)
153+
Next j
154+
Next i
155+
End Sub
156+
157+
````
158+
159+
The following example shows a **RadProgressArea** with a progress template and **OnClientProgressBarUpdating** event handler for versions **before Q2 2015**:
44160

45161
````ASPNET
46162
<script type="text/javascript">

0 commit comments

Comments
 (0)