When using the RadProgressArea in a custom monitoring scenario what is the prescribed way to handle the cancel operation on the server side? I am looping through a collection of items, doing stuff and I want to check something like RadProgressContext.Current.HasCancelBeenClicked. Here is what I have so far. I am getting some odd behavior on cancel along with the progress bar percentage part not updating. If you try to invoke it a second time nothing updates.
Default.aspx:
Options.aspx:
Result.aspx:
Default.aspx:
| <%@ Page Language="C#" AutoEventWireup="true" %> |
| <%@ Import Namespace="System.Collections.Generic" %> |
| <%@ Import Namespace="System.Threading" %> |
| <%@ Import Namespace="Telerik.Web.UI" %> |
| <!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>Long running operation with Cancel support example</title> |
| <style type="text/css"> |
| .Hide |
| { |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="ScriptManager" runat="server" EnableHistory="true" |
| EnableScriptCombine="true" OutputCompression="AutoDetect"> |
| <Scripts> |
| <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> |
| <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> |
| </Scripts> |
| </telerik:RadScriptManager> |
| <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server" Skin="Default" /> |
| <telerik:RadAjaxManager ID="AjaxManager" runat="server" DefaultLoadingPanelID="AjaxLoadingPanel"> |
| <AjaxSettings> |
| <telerik:AjaxSetting AjaxControlID="DoWork"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="DoWork" UpdatePanelRenderMode="Inline" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| <telerik:AjaxSetting AjaxControlID="CancelWork"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="CancelWork" UpdatePanelRenderMode="Inline" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| </AjaxSettings> |
| </telerik:RadAjaxManager> |
| <telerik:RadWindowManager ID="WindowManager" runat="server" /> |
| <asp:Button ID="ShowOptionsDialog" runat="server" CausesValidation="false" OnClientClick="ShowOptionsDialog_Click(); return false;" |
| Text="Go!" /> |
| <asp:Button ID="DoWork" runat="server" CausesValidation="false" CssClass="Hide" OnClick="DoWork_Click" /> |
| <asp:Button ID="CancelWork" runat="server" CausesValidation="false" CssClass="Hide" |
| OnClick="CancelWork_Click" /> |
| <asp:HiddenField ID="DoWorkParameters" runat="server" /> |
| <asp:HiddenField ID="OperationId" runat="server" /> |
| <telerik:RadCodeBlock runat="server"> |
| <script type="text/javascript"> |
| window.$ = $telerik.$; |
| function ShowOptionsDialog_Click() { |
| var optionsDialog = $find('<%= OptionsDialog.ClientID %>'); |
| optionsDialog.show(); |
| } |
| function OptionsDialog_Close(sender, e) { |
| var result = e.get_argument(); |
| if (result) { |
| var progressArea = $find($('[id$=_ProgressArea]').attr('id')); |
| progressArea.show(); |
| var cancelButton = progressArea._findElement("CancelButton"); |
| $addHandlers(cancelButton, { "click": ProgressDialog_Cancel }, this); |
| var progressDialog = $find('<%= ProgressDialog.ClientID %>'); |
| progressDialog.show(); |
| $('<%= "#" + DoWorkParameters.ClientID %>').val(result); |
| // TODO: get an operation ID with AJAX |
| var operationId = "{EE1B4300-CF80-4CF1-9C01-5E6412DAEC00}"; |
| $('<%= "#" + OperationId.ClientID %>').val(operationId); |
| $get('<%= DoWork.ClientID %>').click(sender, e); |
| } |
| } |
| function ProgressDialog_Cancel(sender, e) { |
| $get('<%= CancelWork.ClientID %>').click(sender, e); |
| return false; |
| } |
| function ProgressDialog_Close(title, message) { |
| var progressArea = $find($('[id$=_ProgressArea]').attr('id')); |
| progressArea.hide(); |
| var progressDialog = $find('<%= ProgressDialog.ClientID %>'); |
| progressDialog.close(); |
| var resultsDialog = $find('<%= ResultsDialog.ClientID %>'); |
| resultsDialog.set_title(title); |
| resultsDialog.argument = message; |
| resultsDialog.show(); |
| } |
| Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); |
| function BeginRequestHandler(sender, args) { |
| var elem = args.get_postBackElement(); |
| if (elem.id == '<%= CancelWork.ClientID %>') { |
| args.set_cancel(false); |
| } |
| } |
| </script> |
| </telerik:RadCodeBlock> |
| <telerik:RadWindow ID="OptionsDialog" runat="server" Behaviors="Move, Resize, Close" |
| KeepInScreenBounds="true" Modal="true" NavigateUrl="~/Options.aspx" OnClientClose="OptionsDialog_Close" |
| ReloadOnShow="true" ShowContentDuringLoad="false" Title="Operation Options" VisibleStatusbar="false" /> |
| <telerik:RadWindow ID="ProgressDialog" runat="server" Behaviors="None" KeepInScreenBounds="true" |
| Height="250px" Modal="true" ShowContentDuringLoad="false" VisibleTitlebar="false" |
| VisibleStatusbar="false" Width="500px"> |
| <ContentTemplate> |
| <telerik:RadProgressArea ID="ProgressArea" runat="server" DisplayCancelButton="true" |
| ProgressIndicators="CurrentFileName,TimeElapsed,TimeEstimated,TotalProgress,TotalProgressBar,TotalProgressPercent" |
| Width="100%" /> |
| <telerik:RadProgressManager ID="ProgressManager" runat="server" /> |
| </ContentTemplate> |
| </telerik:RadWindow> |
| <telerik:RadWindow ID="ResultsDialog" runat="server" Behaviors="Move, Resize, Close" |
| KeepInScreenBounds="true" Modal="true" NavigateUrl="~/Results.aspx" ReloadOnShow="true" |
| ShowContentDuringLoad="false" VisibleStatusbar="false" /> |
| </form> |
| </body> |
| </html> |
| <script runat="server"> |
| static Dictionary<Guid, WorkState> stateDictionary = new Dictionary<Guid, WorkState>(); |
| protected void DoWork_Click(object sender, EventArgs e) |
| { |
| var stateId = new Guid(OperationId.Value); |
| stateDictionary.Add(stateId, new WorkState { Argument = DoWorkParameters.Value }); |
| ThreadPool.QueueUserWorkItem(DoActualWork, stateId); |
| var state = stateDictionary[stateId]; |
| while (!state.IsComplete) |
| { |
| RadProgressContext.Current.CurrentOperationText = state.Message ?? string.Empty; |
| RadProgressContext.Current.PrimaryPercent = state.PercentComplete; |
| Thread.Sleep(500); |
| } |
| var resultTitle = !state.IsAborted ? "Operation successful!" : "Operation failed."; |
| var resultMessage = !state.IsAborted ? "Your request was fulfilled." : "Your request was canceled"; |
| RadProgressContext.Current.OperationComplete = true; |
| RadAjaxManager.GetCurrent(this).ResponseScripts.Add(string.Format("ProgressDialog_Close('{0}', '{1}');", resultTitle, resultMessage)); |
| stateDictionary.Remove(stateId); |
| } |
| protected void CancelWork_Click(object sender, EventArgs e) |
| { |
| var stateId = new Guid(OperationId.Value); |
| if (stateDictionary.ContainsKey(stateId)) |
| { |
| stateDictionary[stateId].AbortRequested = true; |
| } |
| } |
| void DoActualWork(object o) |
| { |
| var state = stateDictionary[(Guid)o]; |
| var maxItems = 20; |
| for (var itemIndex = 0; itemIndex < maxItems; itemIndex++) |
| { |
| System.Diagnostics.Debug.Write(itemIndex); |
| state.Message = string.Format("Operation {0} - {1}", state.Argument, itemIndex); |
| state.PercentComplete = itemIndex / maxItems * 100; |
| Thread.Sleep(1000); |
| if (state.AbortRequested) |
| { |
| state.IsAborted = true; |
| break; |
| } |
| } |
| state.IsComplete = true; |
| } |
| class WorkState |
| { |
| public object Argument; |
| public string Message; |
| public int PercentComplete; |
| public bool IsComplete; |
| public bool AbortRequested; |
| public bool IsAborted; |
| } |
| </script> |
Options.aspx:
| <%@ Page Language="C#" AutoEventWireup="true" %> |
| <!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"> |
| <body> |
| <form id="form1" runat="server"> |
| <div> |
| <input id="Name" type="text" value="Calculate Pii" /> |
| </div> |
| <div> |
| <button onclick="Close(document.getElementById('Name').value);"> |
| Go!</button> |
| <button onclick="Close(null);"> |
| Cancel</button> |
| </div> |
| <script type="text/javascript"> |
| function GetRadWindow() { |
| var radWindow = null; |
| if (window.radWindow) { |
| radWindow = window.radWindow; |
| } |
| else if (window.frameElement.radWindow) { |
| radWindow = window.frameElement.radWindow; |
| } |
| return radWindow; |
| } |
| function Close(returnValue) { |
| var radWindow = GetRadWindow(); |
| if (returnValue == undefined) { |
| radWindow.argument = null; |
| radWindow.close(); |
| } |
| else { |
| radWindow.close(returnValue); |
| } |
| } |
| </script> |
| </form> |
| </body> |
| </html> |
Result.aspx:
| <%@ Page Language="C#" AutoEventWireup="true" %> |
| <!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"> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="ScriptManager" runat="server" EnableHistory="true" |
| EnableScriptCombine="true" OutputCompression="AutoDetect"> |
| <Scripts> |
| <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> |
| <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> |
| </Scripts> |
| </telerik:RadScriptManager> |
| <div id="Message"> |
| </div> |
| <input type="button" value="Close" onclick="Close(null);" /> |
| <script type="text/javascript"> |
| window.$ = $telerik.$; |
| function GetRadWindow() { |
| var radWindow = null; |
| if (window.radWindow) { |
| radWindow = window.radWindow; |
| } |
| else if (window.frameElement.radWindow) { |
| radWindow = window.frameElement.radWindow; |
| } |
| return radWindow; |
| } |
| function Close(returnValue) { |
| var radWindow = GetRadWindow(); |
| if (returnValue == undefined) { |
| radWindow.argument = null; |
| radWindow.close(); |
| } |
| else { |
| radWindow.close(returnValue); |
| } |
| } |
| $(document).ready(function () { |
| var window = GetRadWindow(); |
| $("#Message").text(window.argument); |
| }); |
| </script> |
| </form> |
| </body> |
| </html> |