Questions on UI for ASP.NET AJAX Forum

0 answers

51 views

RadProgressBar with RenderMode="Auto" does not work(not visible) in Mobile device (chrome on iphone)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TabInputs.aspx.cs" Inherits="TabInputs" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<script>
function OnClientTabSelected(sender, eventArgs) {
var tab = eventArgs.get_tab();
var htmlShow = document.getElementById("divProgressBar");
htmlShow.style.display = "block";
}
function OnClientMouseOut(sender, eventArgs) {
var tab = eventArgs.get_tab();
var htmlShow = document.getElementById("divProgressBar");
htmlShow.style.display = "none";
}
</script>

<div>
<telerik:RadTabStrip ID="RadTabStrip1" RenderMode="Auto" runat="server"
OnClientTabSelected="OnClientTabSelected"
OnClientMouseOut="OnClientMouseOut"
MultiPageID="RadMultiPage1" Skin="MetroTouch">
</telerik:RadTabStrip>
<telerik:RadProgressManager runat="server" ID="rpm" />
<div id="divProgressBar" runat="server" style="display: none; position: absolute; top: 180px; z-index: -1;">
<telerik:RadProgressBar RenderMode="Auto" runat="server" ID="RadProgressBar4"
Indeterminate="true">
</telerik:RadProgressBar>
</div>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
</telerik:RadMultiPage>
</div>
</form>
</body>
</html>

ProgressBar

asked on 07 Apr 2023

0 answers

310 views

How to use progressbar in asp.net

Hi,
I have a aspx page, in that i added rad progressbar and one button when click that button, progress not show increase value, once fully page refresh , it show 100 % finished. How to show progress bar based in increase values which is passed from server side button click, here i paste code behind and server side code.

Code behind
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<div>
<telerik:RadButton ID="RadButton1" runat="server" Text="RadButton"></telerik:RadButton>
<telerik:RadProgressBar ID="RadProgressBar1" runat="server"></telerik:RadProgressBar>
</div>
</form>
</body>
</html>

And Server side code is

Private Sub RadButton1_Click(sender As Object, e As EventArgs) Handles RadButton1.Click

RadProgressBar1.BarType = Telerik.Web.UI.ProgressBarType.Percent
RadProgressBar1.Orientation = Telerik.Web.UI.ProgressBarOrientation.Horizontal
RadProgressBar1.MaxValue = 100

RadProgressBar1.ShowLabel = True
RadProgressBar1.Skin = "Silk"
For i As Integer = 0 To 100 - 1
RadProgressBar1.Value = i

System.Threading.Thread.Sleep(100)
Next
End Sub

If i add ajax loading panel, then i will get default circle progressbar instead of bar progress bar.

Thanks

ProgressBar

asked on 21 Jan 2021

7 answers

1.7K+ views

Updating Progress Bar Value from server side Callback function

Hello,

We are trying to update a Progress bar from a Callback function that returns progress on a printing job from a code behind function.

The code behind method is as follows:

private void ClientOnJobProgress(object sender, JobProgressEventArgs arguments)
{
Console.WriteLine("Progress: {0:000}% with job state {1}", arguments.Progress, arguments.State.ToString());
Progress = arguments.Progress;
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "progress", "AdjustProgressBar('" + arguments.Progress + "');", true);

// RadProgressBar1.Value = arguments.Progress;
}
If I set the Progress Bar Value as in the comments line above , the progress is only updated when the job is 100% complete and does not update during the process. I tried calling a JavaScript function from the codebehind that finds the progress bar element in the document and tries to update the progress bar value then. Which doesnt update at all.

function AdjustProgressBar(progressValue) {

var progressBar = document.getElementById('<%=RadProgressBar1.ClientID%>');
progressBar.value = progressValue;

}

What would be the proper way of updating a ProgressBar from a callback function where as to show the updates values? Please advise and thank you in advance.

ProgressBar

answered on 21 Oct 2019

1 answer

59 views

Appearance changes

How can I change the colour of the unfilled portion of the progress bar? Also, is it possible to have square corners of the bar?

ProgressBar

answered on 11 Oct 2018

8 answers

689 views

Setting the value from codebehind

Hi everyone (Telerik team),
I am currently evaluating the new ProgressBar control, but I face a problem of setting its value from the codebehind (C#).
It is not a problem how to set the value of the control, but my opservation that the ProgressBar is not advancing like in the Telerik's demo (using JavaScript).

On a simple webform I added a new ProgressBar and older RadProgressArea (with RadProgressManager on top of it) control, in addition to a Button for starting the action. The code is as follows:

public partial class _Default : System.Web.UI.Page

{

RadProgressContext progress = RadProgressContext.Current;

protected void Button_Click1(object sender, EventArgs e)

{

for (int i = 0; i < 100; i++)

{

// 1. RadProgressBar (new control):

RadProgressBar1.Value = i;

// 2. RadProgressArea (previous control):

progress.PrimaryValue = i;

progress.PrimaryPercent = i;

progress.SecondaryValue = i;

progress.SecondaryPercent = i;

System.Threading.Thread.Sleep(100);

}

protected void Button_Click2(object sender, EventArgs e)

{

// Clear the progressbar:

RadProgressBar1.Value = 0;

}

After running the code, the older RadProgressArea is working fine, ie. the bar is advancing at each step as we expected.
However, the new RadProgressBar is not advancing and will only show its final value (in this case 99) at the end of the process.

Could someone point me in the right direction in solving this problem. I repeat, I need above functionality without using javascript.

Regards,
Senad

ProgressBar

answered on 09 Mar 2018

6 answers

205 views

Make progress bar "clickable"?

Is it possible to make progress bar "clickable" and it would re-direct to another web page?

Thx.

ProgressBar

answered on 27 Feb 2018

0 answers

86 views

RadProgressBar Chunk - incorrect style value

Hello I am using RadProgress bar of chunk type,

When the chunkCount = 3 it generates incorrect width style for completed steps, it uses the comma instead of the dot so 33,33334% instead of 33.33334%.

So that it is not working as expected.

version: Telerik_UI_for_ASP.NET_AJAX_2016_2_607_Dev

code behind:

rpb_reviewMail.MaxValue = dataTable.Rows.Count;
rpb_reviewMail.ChunksCount = dataTable.Rows.Count;
rpb_reviewMail.Value = currentStep;

aspx:

<telerik:RadAjaxPanel runat="server">
<telerik:RadProgressBar RenderMode="Lightweight" runat="server" BarType="Chunk" Skin="MetroTouch" MinValue="0" Width="100%">
</telerik:RadProgressBar>

</telerik:RadAjaxPanel>

ProgressBar

asked on 04 May 2017

1 answer

73 views

RadProgressBar skin broke

I have updated Telerik to the newest version (2017.1.228.40) and now the skin (Windows7) of the RadProgressBar seems broken (see attachement).

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ProgressBar.Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="radScriptManager" runat="server" />

<div>

ProgressBar with default skin

<telerik:RadProgressBar ID="radProgressBar1" runat="server" BarType="Percent" Value="65" /><br /><br />

ProgressBar with Windows7 skin

<telerik:RadProgressBar ID="radProgressBar2" runat="server" BarType="Percent" Value="65" Skin="Windows7" /><br /><br />

Button with Windows7 skin

<telerik:RadButton ID="radButton" runat="server" Text="Button with Windows7 skin" Skin="Windows7" />

</div>

</form>

</body>

</html>

ProgressBar

answered on 20 Apr 2017

2 answers

510 views

Using ProgressBar or ProgressArea with executing an SQL statement

I have an ASP.Net page that uses the ProgressBar when user clicks on EXPORT button to export data to an Excel (.xlsx) file. It works great.

Now the question is that is there a way to use that ProgressBar or the ProgressArea when executing a long running SQL statement?

When the user clicks on the EXPORT button, the VB code-behind looks at the RadRadioButtonList to determine which was selected and run the appropriate Export process. The RadRadioButtonList has EXCEL, PDF, and TABLE. When EXCEL is selected, the ProgressBar is used to show progress of exporting data to an Excel file. Exporting to PDF does not use the ProgressBar. I would like to have a way to show the ProgressBar or use the ProgressArea when exporting to a TABLE which basically means it using the SQL INSERT statement to insert records from a SELECT statement into another table.

Please help!

Thanks!

Sincerely,

Keith Jackson

ProgressBar

answered on 21 Jul 2016

3 answers

135 views

Progress Bar Tooltip Demo

I'm trying to build this functionality into my website. In Telerik's demo the progress bar is inside the tooltip and it moves around to each element when an element is clicked on. How do I do this?

Am I correct to assume it is one tooltip and one progressbar and the TargetId of the tooltip is changed to the element that was clicked on with client side programming? Could I have an example of the client side programming? I am new to Telerik and Jquery as of this week, but I am a solid programmer of many years, some how just never got to JQuery.

ProgressBar