ProgressBar Hiding - Essential Objects, Inc. Support Forum

Welcome Guest

Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » ProgressBar Hiding

ProgressBar Hiding

Options

Previous Topic · Next Topic

Bob

Posted: Friday, October 26, 2007 11:08:18 AM

Rank: Newbie
Groups: Member

Joined: 10/26/2007
Posts: 5

I have very successfuly implemented your progress bar on our web pages, very nice. I can't figure out how to hide this object and then make it visible when the button event is triggered. Can you help? Thanks

eo_support

Posted: Friday, October 26, 2007 11:14:09 AM

Rank: Administration
Groups: Administration

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

Hi Bob,

Have you tried to put it inside a DIV and then hide that DIV?

Code: HTML/ASPX

Copy

<div id="div1">
   ...progress bar goes here
</div>

You can then hide it by:

Code: JavaScript

Copy

document.getElementById("div1").style.display = "none";

Thanks

Bob

Posted: Friday, October 26, 2007 11:21:23 AM

Rank: Newbie
Groups: Member

Joined: 10/26/2007
Posts: 5

Hey thanks for the quick response! Sorry for being new to this, but where does the javascript go? I'm running a vb code behind page and thought something would work in the vb code on the button event, not so.
Thanks so much for you help!

eo_support

Posted: Friday, October 26, 2007 12:46:25 PM

Rank: Administration
Groups: Administration

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

Oh. If you want to do that on the server side then you would just set the ProgressBar's Visible to False in your code. Sorry I thought you meant client side. :)

Bob

Posted: Friday, October 26, 2007 1:09:59 PM

Rank: Newbie
Groups: Member

Joined: 10/26/2007
Posts: 5

Ok, I put that to my test example and it almost works. The first time I click the button, the progress bar becomes visible but does not count up. If I click the button again it works fine. More times also works, but never the first. I must be missing something, below is the test code base on your site test example:

DEFAULT5.ASPX--------------------------------
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default5.aspx.vb" Inherits="Default5" %>

<%@ 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 id="div1">
<eo:ProgressBar ID="ProgressBar1" runat="server" BackgroundImage="00060301" BackgroundImageLeft="00060302"
BackgroundImageRight="00060303" ControlSkinID="None" IndicatorImage="00060304"
ShowPercentage="True" StartTaskButton="Button1" Value="0" Width="250px" Visible="False">
</eo:ProgressBar>

</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>

DEFAULT5.ASPX.VB---------------------

Partial Class Default5
Inherits System.Web.UI.Page

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
ProgressBar1.Visible = True
End Sub

Protected Sub ProgressBar1_RunTask(ByVal sender As Object, ByVal e As EO.Web.ProgressTaskEventArgs) Handles ProgressBar1.RunTask
ProgressBar1.Maximum = 100

System.Threading.Thread.Sleep(100)
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(100)

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

End Class

Thanks again and sorry I can't identify the problem myself!

eo_support

Posted: Friday, October 26, 2007 1:27:59 PM

Rank: Administration
Groups: Administration

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

Hi Bob,

I see what you mean. It will never work that way. You can not have the same button doing two things. Specifically, you can not have the buttom that starts the progress bar task to also do other things --- in your case, to show the progress bar. In order to achieve what you want to do, you must rely on our client side JavaScript interface. The following code gives you a working example:

Code: HTML/ASPX

Copy

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<%@ 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()
    {
        //Display the progress bar
        var div = document.getElementById("pbDiv");
        div.style.display = "block";
        
        //Start the progress bar
        var pb = eo_GetObject("ProgressBar1");
        pb.startTask();
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="pbDiv" style="display:none">
        <eo:ProgressBar ID="ProgressBar1" runat="server" BackgroundImage="00060401" BackgroundImageLeft="00060402"
            BackgroundImageRight="00060403" ControlSkinID="None" IndicatorImage="00060404"
            ShowPercentage="True" Value="30" Width="250px" ClientSideOnValueChanged="on_pb_value_changed" StartTaskButton="Button1" OnRunTask="ProgressBar1_RunTask">
        </eo:ProgressBar>
    </div>
        <input type="button" onclick="start_progressBar()" value="Start" />
    </form>
</body>
</html>

Thanks

Bob

Posted: Friday, October 26, 2007 5:43:47 PM

Rank: Newbie
Groups: Member

Joined: 10/26/2007
Posts: 5

This exposes the progress bar fine, but it loops through 100% twice????

Code: HTML/ASPX

Copy

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default5.aspx.vb" Inherits="Default5" %>

<%@ 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()
    {
        //Display the progress bar
        var div = document.getElementById("pbDiv");
        div.style.display = "block";
        
        //Start the progress bar
        var pb = eo_GetObject("ProgressBar1");
        pb.startTask();
    }
    function hide_progressBar()
        {
        //Display the progress bar
        var div = document.getElementById("pbDiv");
        div.style.display = "none";
    }
    </script>


</head>
<body>
    <form id="form1" runat="server">
    <div id="pbDiv" style="display:none">
        <eo:ProgressBar ID="ProgressBar1" runat="server" BackgroundImage="00060401" BackgroundImageLeft="00060402"
            BackgroundImageRight="00060403" ControlSkinID="None" IndicatorImage="00060404"
            ShowPercentage="True" Value="30" Width="250px" ClientSideOnValueChanged="on_pb_value_changed" StartTaskButton="Button1" OnRunTask="ProgressBar1_RunTask">
        </eo:ProgressBar>
    </div>
        <input type="button" onclick="start_progressBar()" value="Start" />
    </form>

</body>
</html>

Code: Visual Basic.NET

Copy

Partial Class Default5
    Inherits System.Web.UI.Page


    Protected Sub ProgressBar1_RunTask(ByVal sender As Object, ByVal e As EO.Web.ProgressTaskEventArgs) Handles ProgressBar1.RunTask
        ProgressBar1.Maximum = 100

        System.Threading.Thread.Sleep(100)
        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(100)

            'You should frequently call UpdateProgress in order
            'to notify the client about the current progress
            e.UpdateProgress(i)
        Next i
        ProgressBar1.StopTaskButton = True
    End Sub

End Class

Sorry for not being able to complete this and your help is really appreciated!

eo_support

Posted: Friday, October 26, 2007 6:54:13 PM

Rank: Administration
Groups: Administration

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

Hi Bob,

The event handler has been hooked up twice. Once in your .aspx file:

Code: HTML/ASPX

Copy

<eo:ProgressBar ... OnRunTask="ProgressBar1_RunTask">
</eo:ProgressBar>

Once in your code with "ProgressBar1.RunTask":

Code: Visual Basic.NET

Copy

Protected Sub ProgressBar1_RunTask(
    ByVal sender As Object, ByVal e As EO.Web.ProgressTaskEventArgs) 
    Handles ProgressBar1.RunTask

Remove any one of them should put it back to normal.

Thanks

Bob

Posted: Saturday, October 27, 2007 5:37:17 AM

Rank: Newbie
Groups: Member

Joined: 10/26/2007
Posts: 5

Thank you very much, it works great. Nice products, I'll look forward to implemnting more of your products in the future!

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.

Message