Problem with ProgressBar inside a Dialog - Essential Objects, Inc. Support Forum

Welcome Guest

Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Problem with ProgressBar inside a Dialog

Problem with ProgressBar inside a Dialog

Options

Previous Topic · Next Topic

Camarate

Posted: Saturday, July 18, 2015 1:05:18 PM

Rank: Advanced Member
Groups: Member

Joined: 9/2/2010
Posts: 120

Hi,

I have a Progressbar control inside a Dialog, which must be closed when the commands in runTask event was finished. For this, I am using a javascript function that closes the Dialog control in ClientSideOnTaskDone property of the ProgressBar.

When I open the Dialog and start the ProgressBar, and lets go until the end, works fine. But, when I click the button associated to the StopTaskButton property, the runTask event was stop, but the javascript function does not run, not closing the Dialog window.

I made a simple project in VB.NET 2005, that is below, to show the problem.

Quote:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="EOProgressBar._Default" %>

<%@ 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 language="JavaScript1.2">
function StartGeneration()
{
var dialog = eo_GetObject('dlgPostBack');
var progress = eo_GetObject('pgbGeneration');
dialog.show(true);
progress.setValue(0);
progress.startTask();
return false;
}

function CloseDialog()
{
var dialog = eo_GetObject('dlgPostBack');
dialog.close();
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Start" runat="server" Text="Start" OnClientClick="javascript: return StartGeneration();" Width="96px" />
  <br />
<br />
<eo:Dialog ID="dlgPostBack" runat="server" AllowResize="True" BackColor="#FFFFC0"
BackShadeColor="255, 255, 192" BorderColor="#335C88" BorderStyle="Solid" BorderWidth="1px"
CloseButtonUrl="" ControlSkinID="None" HeaderHtml="File Generation" Height="200px"
MinimizeButtonUrl="" ResizeImageUrl="" RestoreButtonUrl="" ShadowColor="Silver"
ShadowDepth="7" Width="416px">
<HeaderStyleActive CssText="background-color:#c00000;color:white;font-family:Verdana;font-size:12px;font-weight:bold;padding-bottom:3px;padding-left:4px;padding-right:4px;padding-top:3px;" />
<FooterStyleActive CssText="background-color: #e5f1fd; padding-bottom: 8px;" />
<HeaderStyleInactive CssText="FONT-FAMILY: Verdana; COLOR: #003399; FONT-SIZE: 12pt; FONT-WEIGHT: bold" />
<ContentTemplate>
<div style="font-weight: bold; font-size: 13pt; vertical-align: middle; width: 100%;
color: #003399; font-family: Verdana; height: 100%; background-color: #ffffc0;
text-align: center">
<br />
<asp:Label ID="lblCabPostBackWait" runat="server" Text="Wait..."></asp:Label><br />
<br />
<asp:Label ID="lblCabPostBackMessage" runat="server" Text="Processing Your Request"></asp:Label><br />
<br />
<eo:ProgressBar ID="pgbGeneration" runat="server" BackgroundImage="00060301" BackgroundImageLeft="00060302"
BackgroundImageRight="00060303" ControlSkinID="None" IndicatorImage="00060304"
ShowPercentage="True" Width="250px" ClientSideOnTaskDone="CloseDialog" StopTaskButton="cmdExitGeneration">
</eo:ProgressBar>
 <br /><asp:Button ID="cmdExitGeneration" runat="server" Text="Stop" Width="96px" Enabled="False" UseSubmitBehavior="False" /><br />
</div>
</ContentTemplate>
<ContentStyleActive CssText="border-top: #335c88 1px solid; background-color: #e5f1fd" />
</eo:Dialog>

</div>
</form>
</body>
</html>

Quote:

Partial Public Class _Default
Inherits System.Web.UI.Page

Private Sub pgbGeneration_RunTask(ByVal sender As Object, ByVal e As EO.Web.ProgressTaskEventArgs) Handles pgbGeneration.RunTask

Dim i As Integer
For i = 0 To 100
'Stop the task as soon as we can if the user has
'stopped it from the client side
If e.IsStopped Then
Exit For
End If

'Here we call Thread.Sleep just for demonstration
'purpose. You should replace this with code that
'performs your long running task.
System.Threading.Thread.Sleep(500)

'You should frequently call UpdateProgress in order
'to notify the client about the current progress
e.UpdateProgress(i)
Next i

End Sub

End Class

Another problem in this project is that I can not centralize the ProgressBar control in the Dialog template. It's staying left-aligned always, as below.

I appreciate if modified it to work correctly.

Regards,

Marcelo Camarate

eo_support

Posted: Tuesday, July 21, 2015 2:40:56 PM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,229

Hi,

Clicking the ProgressBar's StopButton just stops the ProgressBar. It does not mean the task has finished, thus it won't fire ClientSideOnTaskDone event. If you wish to do that, you can put a regular HTML button in your dialog and then handle the button's click event with JavaScript. You can then call the ProgressBar's stop method and the dialog's close method in your event handler.

The outer element of the ProgressBar is a DIV. It won't automatically centers itself inside a container with "text-align:center". You can add style="margin: 0 auto;" to the ProgressBar to automatically center the ProgressBar.

Thanks!

Camarate

Posted: Tuesday, July 21, 2015 4:39:24 PM

Rank: Advanced Member
Groups: Member

Joined: 9/2/2010
Posts: 120

Hi,

Thanks for your reply.

In relation to ProgressBar control centralization, all right.

But, in relation to Stop button, I'm still having problems. I changed the sample code as you suggested me, but now, when I press the button, the following error window is shown.

You can see in the latest example code below, I created a function StopGeneration to stop the ProgressBar task, but it is never executed.

Quote:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="EOProgressBar._Default" %>

<%@ 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 language="JavaScript1.2">
function StartGeneration()
{
var dialog = eo_GetObject('dlgPostBack');
dialog.show(true);

var progress = eo_GetObject('pgbGeneration');
progress.setValue(0);
progress.startTask();

return false;
}

function StopGeneration()
{
var progress = eo_GetObject('pgbGeneration');
progress.stopTask();
CloseDialog();
return false;
}

function CloseDialog()
{
var dialog = eo_GetObject('dlgPostBack');
dialog.close();
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Start" runat="server" Text="Start" OnClientClick="javascript: return StartGeneration();" Width="96px" />
  <br />
<br />
<eo:Dialog ID="dlgPostBack" runat="server" AllowResize="True" BackColor="#FFFFC0"
BackShadeColor="255, 255, 192" BorderColor="#335C88" BorderStyle="Solid" BorderWidth="1px"
CloseButtonUrl="" ControlSkinID="None" HeaderHtml="File Generation" Height="112px"
MinimizeButtonUrl="" ResizeImageUrl="" RestoreButtonUrl="" ShadowColor="Silver"
ShadowDepth="7" Width="416px">
<HeaderStyleActive CssText="background-color:#c00000;color:white;font-family:Verdana;font-size:12px;font-weight:bold;padding-bottom:3px;padding-left:4px;padding-right:4px;padding-top:3px;" />
<FooterStyleActive CssText="background-color: #e5f1fd; padding-bottom: 8px;" />
<HeaderStyleInactive CssText="FONT-FAMILY: Verdana; COLOR: #003399; FONT-SIZE: 12pt; FONT-WEIGHT: bold" />
<ContentTemplate>
<div style="font-weight: bold; font-size: 13pt; vertical-align: middle; width: 100%;
color: #003399; font-family: Verdana; background-color: #ffffc0;
text-align: center">
<br />
<asp:Label ID="lblCabPostBackProgressWait" runat="server" Text="Wait..."></asp:Label><br />
<br />
<asp:Label ID="lblCabPostBackProgressMessage" runat="server" Text="Processing Your Request"></asp:Label><br />
<br />
</div>
<div style="font-weight: bold; font-size: 13pt; vertical-align: middle; width: 100%;
color: #003399; font-family: Verdana; background-color: #ffffc0;
text-align: center">
<eo:ProgressBar ID="pgbGeneration" runat="server" BackColor="White" BorderColor="Silver"
BorderStyle="Solid" BorderWidth="1px" ClientSideOnTaskDone="CloseDialog" ControlSkinID="None" ShowPercentage="True"
Value="30" Width="250px" style="margin: 0 auto; top: 0 auto;" BackgroundImage="00060301" BackgroundImageLeft="00060302" BackgroundImageRight="00060303" IndicatorImage="00060304" ForeColor="DarkCyan" Font-Bold="True">
</eo:ProgressBar>
</div>
<div style="font-weight: bold; font-size: 13pt; vertical-align: middle; width: 100%;
color: #003399; font-family: Verdana; background-color: #ffffc0;
text-align: center">
<br />
<asp:Button ID="cmdExitGeneration" runat="server" Text="Stop"
Width="96px" OnClientClick="javascript: return StopGeneration();" /><br />
<br />
</div>
</ContentTemplate>
<ContentStyleActive CssText="border-top: #335c88 1px solid; background-color: #e5f1fd" />
</eo:Dialog>

</div>
</form>
</body>
</html>

Quote:

Partial Public Class _Default
Inherits System.Web.UI.Page

Private Sub pgbGeneration_RunTask(ByVal sender As Object, ByVal e As EO.Web.ProgressTaskEventArgs) Handles pgbGeneration.RunTask

Dim i As Integer
For i = 0 To 100

System.Threading.Thread.Sleep(100)

If e IsNot Nothing Then
If e.IsStopped Then
Exit For
Else
e.UpdateProgress(i)
End If
End If
Next i

End Sub

End Class

I appreciate if modified it to work correctly.

Regards,

Marcelo Camarate

eo_support

Posted: Tuesday, July 21, 2015 9:13:22 PM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,229

Hi,

Don't use a server asp:Button. Use a client side HTML input button element.

Thanks!

Camarate

Posted: Tuesday, July 21, 2015 10:38:27 PM

Rank: Advanced Member
Groups: Member

Joined: 9/2/2010
Posts: 120

Hi,

Thank you so much. Now, all works fine.

Regards,

Marcelo Camarate

eo_support

Posted: Wednesday, July 22, 2015 9:22:38 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,229

Great. Glad to hear that it's working for you.

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.