Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Progressbar and messages

Progressbar and messages Options
Previous Topic · Next Topic
Bill
Posted: Tuesday, November 13, 2007 6:28:29 AM
Rank: Newbie
Groups: Member

Joined: 11/13/2007
Posts: 6
I thought this would be simple. When the progess bar is complete, display a message in a textbox indicating the job is complete. The TextBox1.Text is not changed on the screen after the process is returned from the sub ProgressBar_ItemClick. The ProgressBar itself works perfectly.

All the components are in a AJAX UpdatePanel.

Public Partial Class TestProgress
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Private Sub ProgressBar_ItemClick(ByVal sender As System.Object, ByVal e As EO.Web.ProgressTaskEventArgs) Handles ProgressBar1.RunTask
Dim i As Integer
For i = 0 To 10
If e.IsStopped Then
Exit For
End If
System.Threading.Thread.Sleep(500)
e.UpdateProgress(i)
Next i
TextBox1.Text = "Test complete" ' this does not get displayed.
End Sub
End Class


Thank you in advance
Bill

Back to top
 
eo_support
Posted: Tuesday, November 13, 2007 6:46:50 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,217
Hi Bill,

ProgressBar.RunTask is a very special event. You won't be able to do anything else rather than calling UpdateProgress. You can, however, supply UpdateProgress with a second parameter. This parameter will be transferred to the client side. You will then handle your client side ClientSideOnValueChanged event. Inside that event handler you can check this additional value and change the contents of your TextBox accordingly.

Feel free to let us know if you need more help.

Thanks
Back to top
 
Bill
Posted: Tuesday, November 13, 2007 7:38:21 AM
Rank: Newbie
Groups: Member

Joined: 11/13/2007
Posts: 6
It sounds good in theory, but do you have any examples. Below is the aspx. Eventually I will want to hide the progressbar, and cancel button until the start button is clicked. Please also indicate where the sample code should go. I.e. by including <body>, <head> or other appropriate tags.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestProgress.aspx.vb" Inherits="ProgressStatus.TestProgress" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
&nbsp;&nbsp;

</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnStart" runat="server" Text="Start" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" /><br />
<eo:ProgressBar ID="ProgressBar1" runat="server" BackColor="#C0FFFF" BorderColor="#00C0C0"
BorderStyle="Solid" BorderWidth="2px" ControlSkinID="None" Font-Bold="True" Font-Size="Medium"
ForeColor="Gray" Height="16px" IndicatorColor="PaleTurquoise" ShowPercentage="True"
StartTaskButton="btnStart" StopTaskButton="btnCancel" Width="250px">
<DesignOptions BackColor="192, 192, 255" />
</eo:ProgressBar>
<asp:TextBox ID="TextBox1" runat="server" Width="248px">initial data</asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Back to top
 
eo_support
Posted: Tuesday, November 13, 2007 7:57:12 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,217
Hi Bill,

Our product not only sounds good in theory. It's a real solution.

The easiest way for you to hide the ProgressBar and StartButton is to do it on the client side instead of using UpdatePanel. You can hide the ProgressBar on the server side but you will need another event rather RunTask event, which can be rather cumbersome.

Our newest beta build has a complete sample demonstrates how to send extra data to the client and use that data on the client side (The same code works in your current build as well). You can download that build to get a working sample (I'll send you the download location). Based on that sample, you can use the following code to change textbox value and hide progress bar (or whatever else):

1. Change text box value:

Code: JavaScript 
document.getElementById("TextBox1").value = "something";


2. Hide anything:

Code: HTML/ASPX 
<div id="container">
    ....anything....
</div>


Code: JavaScript 
document.getElementById("container").style.display = "none";


Thanks
Back to top
 
Bill
Posted: Wednesday, November 14, 2007 7:02:21 AM
Rank: Newbie
Groups: Member

Joined: 11/13/2007
Posts: 6
I think I have the code implement as described in this forum, but I can't get the following to work correctly:

1) TextBox1 does not display the new value.
2) The e.UpdateProgress(i, "Running ...") does not display "Running ..." wheather or not the progressbar is visible.
3) If the Progressbar is not visible, as below implemented below, the Start_Progressbar JavaScript function does not make the Progressbar visible.

The hide seems to be working OK.

Please realize this is just a prototype for implementing a Progressbar, the production code where the Progressbar will be implemented contains dozens of controls and the AJAX UpdatePanel is heavily used. Processing Errors need to be reported back to the user.

The goal is to initially have the START button visible, and have the CANCEL button and ProgressBar hidden. Once the START button is clicked the CANCEL button and ProgressBar should be made visible. Once the process completes successfully, the CANCEL button and ProgressBar should disappear and a message indicating the number or reports successfully saved to disk should be reported back to the user.

Thank you,
Bill


<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestProgress.aspx.vb" Inherits="ProgressStatus.TestProgress" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" >
function start_progressBar()
{
document.getElementById ("TextBox1").value = "New Data";
var div = document.getElementById("divPB");
div.style.display = "block";
var pb = eo_GetObject("ProgressBar1");
pb.startTask();
}
function hide_progressBar()
{
var div = document.getElementById("divPB");
div.stye.display = "none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Button ID="btnStart" runat="server" Text="Start" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
<div id="divPB" style="display:none">
<eo:ProgressBar ID="ProgressBar1" runat="server" BorderColor="Black" BorderStyle="Solid"
BorderWidth="1px" ControlSkinID="None" Height="16px"
ShowPercentage="True" StartTaskButton="btnStart" StopTaskButton="btnCancel" Value="30"
Width="250px" BackgroundImage="00060301" BackgroundImageLeft="00060302" BackgroundImageRight="00060303" IndicatorImage="00060304" RepeatIndicatorImage="True">
</eo:ProgressBar>
</div>
<br />
&nbsp;<asp:TextBox ID="TextBox1" runat="server">Test Data </asp:TextBox>
</form>
</body>
</html>
Back to top
 
eo_support
Posted: Wednesday, November 14, 2007 7:24:05 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,217
Hi Bill,

start_progressBar is not called. You can not expect it to be called just because it's there. You must call it explicitly.

<input type="button" value="start" onclick="start_progressBar">

When you use it this way. You should also clear StartTaskButton property. You may want to change StopTaskButton this way as well.

Once this function is called, both #1 and #3 should work.

You misunderstood the purpose of the second parameter. The parameter is not for you to transfer status information. It's an extra piece of data for you to use, it's your decision as how to use it. We only help you to transfer it to the client side along with the progress information.

The only thing that you would need to be careful about UpdatePanel is that you can not do anything else in RunTask. If you wish to update anything else, you will need to rely on other event and the ProgressBar must be stopped first.

Thanks
Back to top
 
Bill
Posted: Wednesday, November 14, 2007 10:04:56 AM
Rank: Newbie
Groups: Member

Joined: 11/13/2007
Posts: 6
Thank you for the hint on <input type="button" value="start" onclick="start_progressBar">. For anyone else following this thread the syntax for me was: <input type="button" value="start" onclick="start_progressBar()" />

Too bad the ASP:Button tag for the START button does not work, because it is automatically disabled when the process started and then re-enabled when the process is complete. One more question I have is in regard to the hidding the ProgressBar and Cancel button when the task is complete. I have hide_progressBar function but I am not sure how to invoke it from the ProgressBar_ItemClick subroutine.

Thank you,
Bill



Back to top
 
eo_support
Posted: Wednesday, November 14, 2007 10:13:47 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,217
Hi Bill,

Thanks for pointing out the syntax error. You can easily disable the start button in your start_progressBar. Just do document.getElementById("btnStart").disabled = true;.

As for hide_progressBar, you can set the progress bar's ClientSideOnTaskDone to "hide_progressBar". That way it will be called when the task is finished. I am not sure whether you ClientSideOnTaskDone is called when the task is canceled, but since you can handle the cancel button's onclick by yourself, so that shouldn't be an issue anyway.

Thanks
Back to top
 
Bill
Posted: Wednesday, November 14, 2007 12:47:20 PM
Rank: Newbie
Groups: Member

Joined: 11/13/2007
Posts: 6
It is so close. There must be something else going on with the Cancel button. The ClientSideOnTaskDone doesn't fire when the job completes, nor does ClientSideOnError fire. I don't see ClientSideOnCancel which would be helpful.

The Cancel button does cancel the job, but it execution never seems to get to the function xcancel_progressBar(). The TextBox1 should just display Cancelled, in a similar way the it display Complete when the job runs to completeion.

Any ideas
Bill



function end_progressBar()
{
document.getElementById ("TextBox1").value = "Complete";
document.getElementById("btnStart").disabled=false;
document.getElementById("btnStart").focus();
document.getElementById("btnCancel").style.display="none";
document.getElementById("divPB").style.display="none";
}
function xcancel_progressBar()
{
document.getElementById ("TextBox1").value = "Cancelled";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<input type="button" id="btnStart" value="Save Reports" onclick="start_progressBar()") />
<asp:TextBox ID="TextBox1" runat="server">Test Data </asp:TextBox>
<div id="divPB" style="display:none"; >
<eo:ProgressBar ID="ProgressBar1" runat="server" BorderColor="Black" BorderStyle="Solid"
BorderWidth="1px" ControlSkinID="None" Height="16px"
ShowPercentage="True" StopTaskButton="btnCancel" Value="30"
Width="250px" BackgroundImage="00060301" BackgroundImageLeft="00060302" BackgroundImageRight="00060303" IndicatorImage="00060304"
RepeatIndicatorImage="True" ClientSideOnTaskDone="end_progressBar" ClientSideOnError="xcancel_progressBar" >
</eo:ProgressBar>
</div>
<input type="button" id="btnCancel" value="Cancel" onclick="xcancel_progressBar()" style="display:none") />
</form>
</body>
</html>
Back to top
 
eo_support
Posted: Wednesday, November 14, 2007 1:14:16 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,217
Hi Bill,

As for the cancel button, I would leave that to yourself. You already have start button working and you should be able to get the cancel button working the same way. There are some obvious differences between those two which is causing the problem for you, and we certainly expect you to resolve it by yourself. One thing that you need to keep in mind is that you have "pb.startTask()" in your start button handler, you need to find the equivalent for stopping the task from the help file.

ClientSideOnTaskDone is only fired when the task runs complete. It's not fired when you cancel the task. When you cancel the task, your xcancel_progressBar should be called (assume you fix the cancel button issue) and you you will be free to do whatever you'd like inside that function.

Thanks
Back to top
 
Bill
Posted: Thursday, November 15, 2007 8:44:52 AM
Rank: Newbie
Groups: Member

Joined: 11/13/2007
Posts: 6
For anyone looking for an example that controls the START and CANCEL buttons. Initially you will see a START button and a TEXTBOX. Click the start button and the ProgressBar and CANCEL button will appear. The status of the excution will appear in the TEXTBOX.

Bill

Copy the following to your Testprocess.aspx page

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestProgress.aspx.vb" Inherits="ProgressStatus.TestProgress" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" >
function start_progressBar()
{
var div = document.getElementById("divPB");
div.style.display = "block";
var pb = eo_GetObject("ProgressBar1");
pb.startTask();
document.getElementById("btnStart").disabled=true;
document.getElementById("btnCancel").style.display="block";
}
function end_progressBar()
{
document.getElementById("TextBox1").value = "Succssfully Complete";
document.getElementById("btnStart").disabled=false;
document.getElementById("btnStart").focus();
document.getElementById("btnCancel").style.display="none";
document.getElementById("divPB").style.display="none";
}
function xcancel_progressBar()
{
document.getElementById("TextBox1").value = "Cancelled";
document.getElementById("btnStart").disabled=false;
document.getElementById("btnStart").focus();
document.getElementById("btnCancel").style.display="none";
document.getElementById("divPB").style.display="none";
var pb = eo_GetObject("ProgressBar1");
pb.stopTask();
}
function on_progress(progressBar)
{
var xData = progressBar.getExtraData();
document.getElementById("TextBox1").value = progressBar.getExtraData();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<input type="button" id="btnStart" value="Save Reports" onclick="start_progressBar()") />
<asp:TextBox ID="TextBox1" runat="server">Test Data </asp:TextBox>
<div id="divPB" style="display:none"; >
<eo:ProgressBar ID="ProgressBar1" runat="server" BorderColor="Black" BorderStyle="Solid"
BorderWidth="1px" ControlSkinID="None" Height="16px"
ShowPercentage="True" Value="30"
Width="250px" BackgroundImage="00060301" BackgroundImageLeft="00060302" BackgroundImageRight="00060303" IndicatorImage="00060304"
RepeatIndicatorImage="True" ClientSideOnTaskDone="end_progressBar" ClientSideOnError="xcancel_progressBar"
ClientSideOnValueChanged="on_progress" >
</eo:ProgressBar>
</div>
<input type="button" id="btnCancel" value="Cancel" onclick="xcancel_progressBar()" style="display:none") />
</form>
</body>
</html>


Copy the following to you VB partial class.

Public Partial Class TestProgress
Inherits System.Web.UI.Page
Public Event refresh As EventHandler
Private strEndReason As String
Private Sub ProgressBar_ItemClick(ByVal sender As System.Object, ByVal e As EO.Web.ProgressTaskEventArgs) Handles ProgressBar1.RunTask
Dim i As Integer
For i = 0 To 10
If e.IsStopped Then
Exit For
End If
System.Threading.Thread.Sleep(500) ' your long running task
e.UpdateProgress(i, "Running...")
Next i
End Sub
End Class
Back to top
 
eo_support
Posted: Thursday, November 15, 2007 8:47:45 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,217
Nice work! Thanks for sharing!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.