|
|
Rank: Member
Groups: Member
Joined: 1/10/2008
Posts: 26
|
I want to use the progress bar in a different way then when using it for a long server task. I have a page that polls information from the server side at regular basis (using a timer). When the onTick event ocurrs I polled information from a database to see if I should update the progress.
flow example:
Page load -> progressBar1.Value = 0 -> postback -> poll of database (gives value 30), progressBar1.Value = 30 -> postback and so on...
My problem is that after each postback the progress bar resets to zero and then goes up to the set value. For the user it then looks like it is flashing. Can I stop it from drawing the progess bar from zero up to its value? I want the value set directly without the "gliding filling look".
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi Patrik, There is no way to avoid that as soon as you are doing a full page reload. So to avoid the problem you would need to avoid full page reload. A possible solution is to use our CallbackPanel: 1. Place whatever you would like to update, except for the progress bar inside the CallbackPanel. Make sure you have the progress bar outside of the CallbackPanel; 2. Set the CallbackPanel's Triggers properly. Also handle the CallbackPanel's Execute event. Inside the execute event handler, use e.Parameter to pass the new progress information to the client side; 3. Handle the CallbackPanel's ClientSideAfterUpdate client side event. Inside that event handler calls the ProgressBar's client side JavaScript interface to update the progress bar, for example:
Code: JavaScript
function AfterCallbackExecute(callback, extraData)
{
//extraData is what you passed to e.Parameter on the server side
ProgressBar1.setValue(parseInt(extraData));
}
This way the ProgressBar is never reloaded and should give you a smooth result. Thanks
|
|
Rank: Member
Groups: Member
Joined: 1/10/2008
Posts: 26
|
Hi, the solution works fine for the progressbar but the callbackPanel stops the click event for two buttons outside the CallbackPanel. The buttons "Set State" and "Set Row" is not working anymore. It is enough to switch back to the asp:UpdatePanel for the buttons to work again. One other thing I noticed was that the timer (Timer1) was not in the list of triggers. I had to add it maually as a trigger. What can be the problem with the CallbackPanel? The aspx page:
Code: HTML/ASPX
<%@ Page Language="C#" EnableEventValidation="false" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="PickOrder.aspx.cs" Inherits="Orders_PickOrder"
Title="Pick Order" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<%@ Register Assembly="WebChart" Namespace="WebChart" TagPrefix="Web" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ObjectDataSource ID="odsPickListRows" runat="server" SelectMethod="GetPickListRowsByPickOrderId"
TypeName="PickOrderDataSource" OnSelected="ods_Selected">
<SelectParameters>
<asp:ControlParameter ControlID="litOrder" PropertyName="Text" Name="orderId" Type="String" />
</SelectParameters>
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="odsTalkmanLog" runat="server" SelectMethod="GetTalkmanLog"
TypeName="PickOrderDataSource" OnSelected="ods_Selected">
<SelectParameters>
<asp:ControlParameter ControlID="litOrder" PropertyName="Text" Name="orderId" Type="String" />
</SelectParameters>
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="odsStates" runat="server" SelectMethod="GetStates" TypeName="PickOrderDataSource">
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="odsKPI" runat="server" SelectMethod="GetOrderKPIs" TypeName="KpiDataSource">
<SelectParameters>
<asp:ControlParameter ControlID="litOrder" PropertyName="Text" Name="pickOrderId"
Type="String" />
</SelectParameters>
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="odsStateHistory" runat="server" SelectMethod="GetOrderStateHistory"
TypeName="KpiDataSource">
<SelectParameters>
<asp:ControlParameter ControlID="litOrder" PropertyName="Text" Name="orderId" Type="String" />
</SelectParameters>
</asp:ObjectDataSource>
<table>
<tr>
<td colspan="3">
<h3>
<asp:Literal ID="litOrderPrefix" runat="server" />
<asp:Literal ID="litOrder" runat="server" />,
<asp:Literal ID="litList" runat="server" /></h3>
</td>
</tr>
</table>
<table id="tblRunningOrder" runat="server">
<tr>
<td valign="top" width="250">
<asp:Timer ID="Timer1" runat="server" Interval="1000" />
<eo:CallbackPanel ID="UpdatePanel1" runat="server" ClientSideAfterUpdate="UpdateProgress"
OnExecute="UpdatePanel1_Execute1" Triggers="{ControlID:Timer1;Parameter:}">
<table border="0">
<tr>
<td colspan="2">
<h4>
<asp:Literal Text="<%$ Resources:LiveSectionHeader %>" runat="server" />
</h4>
</td>
</tr>
<tr>
<td style="width: 86px">
<strong>
<asp:Literal ID="Literal1" Text="<%$ Resources:CurrentAgvLabelText %>" runat="server" />
</strong>
</td>
<td style="width: 77px">
<asp:Label ID="lblAGV" runat="server" />
</td>
</tr>
<tr>
<td style="width: 86px">
<strong>
<asp:Literal ID="Literal2" Text="<%$ Resources:CurrentStateLabelText %>" runat="server" />
</strong>
</td>
<td style="width: 77px">
<asp:Label ID="lblState" runat="server" />
</td>
</tr>
<tr>
<td style="width: 86px">
<strong>
<asp:Literal ID="Literal3" Text="<%$ Resources:CurrentRowLabelText %>" runat="server" />
</strong>
</td>
<td style="width: 77px">
<asp:Label ID="lblRow" runat="server" />
</td>
</tr>
<tr>
<td style="width: 86px">
<strong>
<asp:Literal ID="Literal5" Text="<%$ Resources:ArticleOnRowLabelText %>" runat="server" />
</strong>
</td>
<td style="width: 77px">
<asp:Label ID="lblArticle" runat="server" />
</td>
</tr>
</table>
</eo:CallbackPanel>
<table>
<tr style="display: block" visible="true" id="ProgressBarTr" runat="server">
<td colspan="2">
<eo:ProgressBar ID="ProgressBar1" runat="server" BackgroundImage="00060101"
BackgroundImageLeft="00060102" BackgroundImageRight="00060103" ControlSkinID="None"
IndicatorImage="00060104" IndicatorIncrement="1" />
<asp:Literal ID="litProgressInfo" runat="server" />
</td>
</tr>
<tr style="display: block" visible="false" id="ProgressRollTr" runat="server">
<td colspan="2">
<asp:Image ID="progressRollerImage" runat="server" ImageUrl="~/App_Themes/ProgressRoller.gif"
ImageAlign="Middle" />
<asp:Literal ID="litLineByLineInfo" runat="server" />
</td>
</tr>
</table>
</td>
<td>
</td>
<td valign="top">
<table id="SetTable" visible="true" runat="server">
<tr>
<td colspan="3">
<h4>
<asp:Literal ID="Literal6" Text="<%$ Resources:SetSectionHeader %>" runat="server" />
</h4>
</td>
</tr>
<tr>
<td>
<asp:Literal ID="Literal7" Text="<%$ Resources:SetRowLabelText %>" runat="server" />
</td>
<td>
<asp:DropDownList ID="ddlNewRow" DataSourceID="odsPickListRows" runat="server" DataTextField="RowId"
DataValueField="RowId">
</asp:DropDownList>
</td>
<td>
<asp:Button ID="Button1" OnClick="btnSetCurrentRow_Click" runat="server" Text="<%$ Resources:SetRowButtonText %>" />
</td>
</tr>
<tr>
<td>
<asp:Literal ID="Literal8" Text="<%$ Resources:SetStateLabelText %>" runat="server" />
</td>
<td>
<asp:DropDownList ID="ddlNewState" DataSourceID="odsStates" runat="server" DataTextField="TextAndId"
DataValueField="StateId">
</asp:DropDownList>
</td>
<td>
<asp:Button ID="btnSetCurrentRow" OnClick="btnSetCurrentState_Click" runat="server"
Text="<%$ Resources:SetStateButtonText %>" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<asp:ObjectDataSource ID="odsPickList" TypeName="PickListContentDataSource" SelectMethod="GetRowsByPickOrderId"
runat="server" OnSelected="odsPickList_Selected">
<SelectParameters>
<asp:QueryStringParameter Type="Int32" Name="pickOrderId" QueryStringField="PickOrderId" />
</SelectParameters>
</asp:ObjectDataSource>
<asp:GridView ID="gvPickListRows" runat="server" DataSourceID="odsPickList" AutoGenerateColumns="false"
AllowSorting="true" CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%">
<Columns>
<asp:BoundField DataField="RowId" SortExpression="RowId" HeaderText="Row Id" />
<asp:BoundField DataField="Article" SortExpression="Article" HeaderText="Article" />
<asp:BoundField DataField="Location" SortExpression="Location" HeaderText="Location" />
<asp:BoundField DataField="Quantity" SortExpression="Quantity" HeaderText="Quantity" />
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<EditRowStyle BackColor="#aaaaaa" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</td>
</tr>
</table>
<table id="TabContainer" width="100%">
<tr>
<td>
<eo:TabStrip ID="tabStrip" runat="server" MultiPageID="multiPage">
<TopGroup>
<Items>
<eo:TabItem Text-Html="<%$Resources:TabText_PerformanceIndex %>">
</eo:TabItem>
<eo:TabItem Text-Html="<%$Resources:TabText_StateHistory %>">
</eo:TabItem>
<eo:TabItem Text-Html="<%$Resources:TalkmanLog %>">
</eo:TabItem>
</Items>
</TopGroup>
</eo:TabStrip>
<eo:MultiPage ID="multiPage" runat="server">
<eo:PageView ID="PageViewPerformanceIndexes" runat="server" Width="100%">
<table width="100%">
<tr>
<td>
<h4>
<asp:Literal ID="Literal9" Text="<%$ Resources:KpiTableHeader %>" runat="server" />
</h4>
<asp:GridView EnableViewState="false" ID="gvOrderKPIs" runat="server" DataSourceID="odsKPI"
AutoGenerateColumns="False" OnRowDataBound="gvOrderKPIs_RowDataBound">
<Columns>
<asp:BoundField DataField="KpiName" HeaderText="<%$ Resources:ColumnHeader_KpiName %>" />
<asp:BoundField DataField="KpiValue" HeaderText="<%$ Resources:ColumnHeader_KpiValue %>" />
<asp:BoundField DataField="Unit" HeaderText="<%$ Resources:ColumnHeader_Unit %>" />
</Columns>
</asp:GridView>
<br />
<asp:Button ID="btnRerunKpiCalculations" runat="server" Text="<%$ Resources:btnRerunKpiCalculationsText %>"
OnClick="btnRerunKpiCalculations_Click" />
</td>
</tr>
</table>
</eo:PageView>
<eo:PageView ID="PageViewStateHistory" runat="server" Width="100%">
<table width="100%">
<tr>
<td>
<h4>
<asp:Literal ID="Literal10" Text="<%$ Resources:StateHistoryTableHeader %>" runat="server" />
</h4>
<asp:GridView ID="gvOrderStateHistory" DataSourceID="odsStateHistory" runat="server"
AutoGenerateColumns="False" OnRowDataBound="gvOrderKPIs_RowDataBound">
<Columns>
<asp:BoundField DataField="CurrentTime" HeaderText="<%$ Resources:ColumnHeader_CurrentTime %>" />
<asp:BoundField DataField="StateText" HeaderText="<%$ Resources:ColumnHeader_StateText %>" />
<asp:BoundField DataField="CurrentAGV" HeaderText="<%$ Resources:ColumnHeader_CurrentAGV %>" />
<asp:BoundField DataField="CurrentRow" HeaderText="<%$ Resources:ColumnHeader_CurrentRow %>" />
<asp:BoundField DataField="PickPositionType" HeaderText="<%$ Resources:ColumnHeader_ManualPick %>" />
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</eo:PageView>
<eo:PageView ID="PageViewTalkmanLog" runat="server" Width="100%">
<table>
<tr>
<td>
<h4>
<asp:Literal ID="litTalkmanLogTableHeader" Text="<%$ Resources:TalkmanLog %>" runat="server" />
</h4>
<asp:GridView ID="gvTalkmanLog" DataSourceID="odsTalkmanLog" runat="server" AutoGenerateColumns="true">
<Columns>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</eo:PageView>
</eo:MultiPage>
</td>
</tr>
</table>
</asp:Content>
The code behind:
Code: C#
public partial class Orders_PickOrder : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
if(!string.IsNullOrEmpty(Request.QueryString["PickOrderId"]))
{
string orderId = Request.QueryString["PickOrderId"];
litOrderPrefix.Text = GetLocalResourceObject("OrderPrefixHeaderText").ToString();
litOrder.Text = orderId;
try
{
showState();
}
catch(Exception ex)
{
Tracer.PrintError(ex.Message);
}
}
else
{
Response.Redirect("PickOrders.aspx");
}
}
}
private string showState()
{
int rowsCompleted = 0;
string orderid = litOrder.Text;
OrdersDB db = new OrdersDB();
DataRow row = db.GetPickOrder(orderid);
litList.Text = string.Format("{0} <a href=\"PickListContent.aspx?PickListId={2}\">{1} ({2})</a>",
GetLocalResourceObject("ListHeaderFormat"),
row["WMSAssignmentId"].ToString(), row["PickListId"].ToString());
string stateId = row["StateID"].ToString();
bool done = (stateId == "9");
tblRunningOrder.Visible = !done;
tabStrip.Visible = done;
multiPage.Visible = done;
if(!done)
{
lblState.Text = string.Format("{0} ({1})", row["StateText"].ToString(), stateId);
lblAGV.Text = row["CurrentAGV"].ToString();
lblRow.Text = row["CurrentRow"].ToString();
int rowsLeft = 0;
rowsCompleted = 0;
int.TryParse(row["RowsLeft"].ToString(), out rowsLeft);
int.TryParse(row["RowsCompleted"].ToString(), out rowsCompleted);
lblArticle.Text = row["Article"].ToString();
loadbar(rowsLeft, rowsCompleted);
UpdateLineByLineData(row["AllRowsInserted"].ToString());
UpdateGUI(row["IsSimulation"].ToString());
}
else
{
odsKPI.Select();
odsStateHistory.Select();
}
return rowsCompleted.ToString();
}
private void UpdateGUI(string isSimulationString)
{
bool isSimulation = false;
bool.TryParse(isSimulationString, out isSimulation);
ProgressBarTr.Visible = isSimulation;
SetTable.Disabled = !(isSimulation && Globals.SimulationAllowed);
ProgressRollTr.Visible = !isSimulation;
}
private void UpdateLineByLineData(string allRowsInserted)
{
bool orderCompleted = false;
bool.TryParse(allRowsInserted, out orderCompleted);
if(orderCompleted)
{
progressRollerImage.ImageUrl = "~/App_Themes/ProgressFillerStopped.gif";
litLineByLineInfo.Text = GetLocalResourceObject("LineByLineStateFinishedText").ToString();
}
else
{
litLineByLineInfo.Text = GetLocalResourceObject("LineByLineStateActiveText").ToString();
}
}
private void loadbar(int rowsLeft, int rowsCompleted)
{
int sum = rowsCompleted + rowsLeft;
ProgressBar1.Maximum = sum;
string progressFormatString = GetLocalResourceObject("ProgressBarStatusTextFormat").ToString();
litProgressInfo.Text = string.Format(progressFormatString, rowsCompleted, rowsLeft);
}
protected void btnSetCurrentState_Click(object sender, EventArgs e)
{
string orderid = litOrder.Text;
string newState = ddlNewState.SelectedValue;
OrdersDB db = new OrdersDB();
db.SetPickOrderState(orderid, newState);
showState();
}
protected void btnSetCurrentRow_Click(object sender, EventArgs e)
{
string orderid = litOrder.Text;
string newRow = ddlNewRow.SelectedValue;
OrdersDB db = new OrdersDB();
db.SetPickOrderRow(orderid, newRow);
showState();
}
protected void odsPickList_Selected(object sender, ObjectDataSourceStatusEventArgs e)
{
GUIHelper.ObjectDataSource_Selected(gvPickListRows, e);
}
protected void gvOrderKPIs_RowDataBound(object sender, GridViewRowEventArgs e)
{
if(e.Row.Cells[0].Text == "header")
{
int colCount = e.Row.Cells.Count;
string header = string.Format("<strong><em>{0}</em></strong>", e.Row.Cells[1].Text);
e.Row.Cells.Clear();
e.Row.Cells.Add(new TableCell());
e.Row.Cells[0].ColumnSpan = colCount;
e.Row.Cells[0].Text = header;
}
}
protected void btnRerunKpiCalculations_Click(object sender, EventArgs e)
{
AdminDB db = new AdminDB();
db.RerunKPICalculations(litOrder.Text);
odsKPI.Select();
}
protected void ods_Selected(object sender, ObjectDataSourceStatusEventArgs e)
{
if(e.Exception != null)
{
Tracer.PrintError(e.Exception.Message);
e.ExceptionHandled = true;
}
else
{
GUIHelper.ObjectDataSource_Selected(sender as GridView, e);
}
}
protected void UpdatePanel1_Execute(object sender, EO.Web.CallbackEventArgs e)
{
}
protected override void OnPreRender(EventArgs e)
{
if(!ClientScript.IsClientScriptBlockRegistered("UpdateProgress"))
{
StringBuilder scriptBuilder = new StringBuilder();
scriptBuilder.Append("function UpdateProgress(callback, extraData)\n");
scriptBuilder.Append("{\n");
scriptBuilder.Append(string.Format(" var progressBar = eo_GetObject('{0}');\n", ProgressBar1.ClientID));
scriptBuilder.Append(" progressBar.setValue(parseInt(extraData));\n");
scriptBuilder.Append("}\n");
ClientScript.RegisterClientScriptBlock(GetType(), "UpdateProgress", scriptBuilder.ToString(), true);
}
base.OnPreRender(e);
}
protected void Timer1_Tick(object sender, EventArgs e)
{
try
{
showState();
}
catch(Exception ex)
{
Tracer.PrintError(ex.Message);
}
}
protected void UpdatePanel1_Execute1(object sender, EO.Web.CallbackEventArgs e)
{
e.Data = "2";
}
}
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Can you isolate the problem into a test page that we can run at here? Without being able to run the page and see the problem, we can't really tell you much about where the problem is.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 1/10/2008
Posts: 26
|
Ok, I have put it into a small test page. Just toggle between the CallbackPanel and the code behind comments to see the difference. The button works with the asp:UpdatePanel. One other difference is that the asp:UpdatePanels trigger list includes the timer but the callbackPanel do not. The list I am refering to is the one used when adding triggers in design mode. Is it a misstake from my side?
Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:Timer ID="Timer1" runat="server" Interval="1000">
</asp:Timer>
<eo:CallbackPanel ID="CallbackPanel1" runat="server" Height="150px" Width="200px"
OnExecute="CallbackPanel1_Execute" Triggers="{ControlID:Timer1;Parameter:}">
<asp:Label ID="Label1" runat="server" Text="0"></asp:Label>
</eo:CallbackPanel>
<%--<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="CallbackPanel2" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="0"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>--%>
<asp:Button ID="Button1" runat="server" Text="Reset" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
Code: C#
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "0";
}
protected void CallbackPanel1_Execute(object sender, EO.Web.CallbackEventArgs e)
{
IncreaseCounter();
}
private void IncreaseCounter()
{
string text = Label1.Text;
int number = int.Parse(text);
number++;
Label1.Text = number.ToString();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
IncreaseCounter();
}
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Thanks for the code. We will take a look and let you know we can find.
Thanks
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
We tested your code on our latest version and noticed that the Button is not set as a trigger of the CallbackPanel, once it is set as a trigger, it would reset the counter fine. So the final result is the counter increases automatically until the button resets it back to zero. Is that the expected result? If so please check whether you are running the latest version.
Trigger editor not being able to see the timer is a problem. It will be fixed in our next build. However just as you have discovered, it does not affect runtime behaviors.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 1/10/2008
Posts: 26
|
That would make sense as the example was build but what if the buttons actually wants to manipulate something else. Lets say the OnClick method actually manipulates a label that is outside the CallbackPanel. Lets say I want to do a complete postback when I press the button.
If I do not add the buttons as a trigger nothing happens. It seems like the callBackPanel overtakes the postback and runs the execute method instead of the method connected to the buttons OnClick. However if I add the button to the trigger list the method connected to the OnClick event runs but then I get a partial postback which I did not want.
I think that the button should trigger a complete postback when not added as a trigger and the OnClick event should be executed?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi Patrik,
Check the version of the DLL that you are running. I believe that was a bug but has been recently fixed. The latest public build is 2007.2.25 (5.0.25).
Thanks
|
|
Rank: Member
Groups: Member
Joined: 1/10/2008
Posts: 26
|
I am running EO.Web.dll version 5.0.16.2 which seems older then. I think I can upgrade because we just bought your products a couple of weeks ago.
/Patrik
|
|
Rank: Member
Groups: Member
Joined: 1/10/2008
Posts: 26
|
Hi,
upgrade to the latest version did it, Thanks!
/Patrik
|
|