|
Article relates to
|
RadGrid
RadWindow
|
|
Created by
|
Stephen, Telerik
|
|
Last modified
|
March 31, 2008
|
|
Last modified by
|
Svetlina, Telerik
|
HOW-TO
Replace the default confirm dialog with RadWindow confirm
DESCTRIPTION
Sometimes you may want to switch the confirmation window of the browser with RadWindow pop-up in order to make it more user-friendly for the end user.
SOLUTION
Since the RadWindow pop-ups are non-blocking, it is necessary to provide a callback function for the prompt and confirm pop-ups in order to receive their result. Thus you will be able to stop the postback request when the user chooses cancels the action through the confirmation dialog.
The code snippets below demonstrate how to pop-up a delete prompt when the user chooses to delete a record in RadGrid. The delete buttons are placed in template column - the first trash can prompts RadConfirm dialog while the second renders the standard browser confirm. The delete operation will be processed only when the user decides to proceed with the request:
[ASPX/ASCX]
| <radW:RadWindowManager ID="windows" runat="server"/> |
| |
| <script type="text/javascript"> |
| var oldConfirm = radconfirm; |
| |
| window.radconfirm = function(text, mozEvent) |
| { |
| var ev = mozEvent ? mozEvent : window.event; //Moz support requires passing the event argument manually |
| //Cancel the event |
| ev.cancelBubble = true; |
| ev.returnValue = false; |
| if (ev.stopPropagation) ev.stopPropagation(); |
| if (ev.preventDefault) ev.preventDefault(); |
| |
| //Determine who is the caller |
| var callerObj = ev.srcElement ? ev.srcElement : ev.target; |
| |
| //Call the original radconfirm and pass it all necessary parameters |
| if (callerObj) |
| { |
| //Show the confirm, then when it is closing, if returned value was true, automatically call the caller's click method again. |
| var callBackFn = function (arg) |
| { |
| if (arg) |
| { |
| callerObj["onclick"] = ""; |
| if (callerObj.click) callerObj.click(); //Works fine every time in IE, but does not work for links in Moz |
| else if (callerObj.tagName == "A") //We assume it is a link button! |
| { |
| try |
| { |
| eval(callerObj.href) |
| } |
| catch(e){} |
| } |
| } |
| } |
| oldConfirm(text, callBackFn, 300, 100, null, null); |
| } |
| return false; |
| } |
| |
| </script> |
| |
| <radG:RadGrid ID="RadGrid1" runat="server" DataSourceID="AccessDataSource1" |
| GridLines="None" Skin="Glassy" EnableAJAX="true" EnableOutsideScripts="true"> |
| <MasterTableView DataSourceID="AccessDataSource1" AllowAutomaticDeletes="true" DataKeyNames="EmployeeID"> |
| <Columns> |
| <radG:GridTemplateColumn UniqueName="DeleteColumn"> |
| <HeaderTemplate> |
| <table width="100%"> |
| <tr> |
| <td style="width:50%"> |
| RadConfirm</td> |
| <td style="width:50%"> |
| Default confirm</td> |
| </tr> |
| </table> |
| </HeaderTemplate> |
| <ItemTemplate> |
| <table width="100%"> |
| <tr> |
| <td> |
| <asp:ImageButton ID="btnDelete" ToolTip="Delete Record" runat="server" CausesValidation="False" |
| CommandName="Delete" OnClientClick="return radconfirm('Are you sure you want to delete this record?', event);" |
| ImageUrl="~/RadControls/Grid/Skins/Default/Delete.gif" /></td> |
| <td> |
| <asp:ImageButton ID="ImageButton1" ToolTip="Delete Record" runat="server" CausesValidation="False" |
| CommandName="Delete" OnClientClick="return confirm('Are you sure you want to delete this record?');" |
| ImageUrl="~/RadControls/Grid/Skins/Default/Delete.gif" /> |
| </td> |
| </tr> |
| </table> |
| </ItemTemplate> |
| </radG:GridTemplateColumn> |
| </Columns> |
| </MasterTableView> |
| </radG:RadGrid> |
| <br /> |
| <asp:AccessDataSource ID="AccessDataSource1" DataFile="~/App_Data/Nwind.mdb" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]" |
| DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = ?" runat="server"> |
| <DeleteParameters> |
| <asp:Parameter Name="EmployeeID" Type="Int32" /> |
| </DeleteParameters> |
| </asp:AccessDataSource> |
A sample project is attached below for additional reference.
SCENARIO #2 (Alternative with cancelling the default delete but with two round trips to the server):
We split the execution logic as follows:
- Click on Delete
- On the server cancel the execution so we can check the user response on the client (here you will need to store the ID of the row in the session, so you know what will be deleted later)
- Output the radconfirmation dialog on the client
- Depending on the user's response, initiate an AjaxRequest that will delete the desired row.
An example of this approach can be found in the attached files for this KB article. Note that the timeout set during the execution of the ajax request is required due to a specific thread handling of parent/child windows under Gecko-based browsers (see this help topic for more info).
Such functionality is already built-in for RadGrid and you can easily enable it by setting the ConfirmDialogType of the delete column to RadWindow. In this case you need to add RadWindowManager on the page. For more information, check this article.
The implementation logic when using RadWindow for ASP.NET AJAX is the same.
In the first of the above scenarios the RadGrid has its EnableAJAX property set to true and therefore when executing the delete command it is updated using AJAX. In case you use RadGrid for ASP.NET AJAX you can't ajaxify it in this manner and in order to achieve the same result you should wrap the RadGrid in a RadAjaxPanel or in a standard Update panel.
You can find the approach with RadAjaxPanel in the attached RadConfirmInGrid_Prometheus.zip archive file.
Please
Sign In
to rate this article.