Dear Team,
I want to achieve the below.
I have a parent page which displays the details about a project. From this, on a button click , I open a radwindow which displays some specific details about the project which displayed in the parent window. The radpopup window has some textboxes and other controls with values along with a UPDATE button.
What I need is, if I change values in the popup and try to close the radwindow without update, it should ask me a confirmation that” Are you sure to close this window without updating your data? The changes will be lost!! Click on CANCEL to return to the window and update". If i try to close the popup radwindow after updated [ie,if I not changed any values after updated] or without any change, it should not ask the confirmation before close the radpopupwindow.
Please help me to achieve this.
4 Answers, 1 is accepted
What I would advise to achieve your scenario is to use global variables as flags to hold the state of the data - if it has been changed and updated. Then according to these flags you can prevent the RadWindow from closing in its OnClientBeforeClose event.
For your convenience I created and attached a simple page that shows the basic approach. Please use it as basis for your further development. Note that I am using the RadWindow's ContentTemplate for clarity, if your are loading an external page you would need to access the main page and store the flags there. How to do that is explained in the following article: http://www.telerik.com/help/aspnet-ajax/window-programming-calling-functions.html.
Best wishes,
Marin
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
Rank 1
Thanks for your help.
i applied the code given by you and works fine. But i have a problem there.I click a button in the parent page to open a radwindow(i am loading external page), do changes in the popup and close the window ,the confirmation asks me one time. If i repeat the same (open radwindow by clicking on the open popup) again and again and close the radwindow after changes done,the confirmation window shown more than 1 time [ie, if i click OK or CANCEL,it asks again and again].
Please help me to show the confirmation window only once for each time closing the radwindow.
I have given the code i used.Thanks.
Parent Page:
ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Parent.aspx.cs" Inherits="CleanTestPopup_Parent" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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 id="Head1" runat="server">
<title></title>
<style type="text/css">
.rwDialogPopup.radconfirm
{
background-image: url('');
}
</style>
<script type="text/javascript">
var varWnd;
function showpopup() {
document.getElementById("Hidden_changeind").value = "0";
varWnd = radopen("Radpopup.aspx", "rwndCategoryEdit");
varWnd.add_beforeClose(OnClientBeforeClose2);
varWnd.maximize();
}
function OnClientBeforeClose2(sender, args) {
//check if the content has been updated, if it has been - just close the window
if (document.getElementById("Hidden_changeind").value == "1") {
//confirm the user action
if (!confirm("Are you sure to close this window without updating your data? The changes will be lost!! Click on CANCEL to return to the window and update")) {
//if cancel is clicked prevent the window from closing
args.set_cancel(true);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<asp:Button ID="Button1" runat="server" Text="Open Popup" OnClientClick="showpopup();return false;" />
<br />
<input id="Hidden_changeind" type="hidden" value="0" />
<br />
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager runat="server" ID="radAjaxManager">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadButton1">
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadWindowManager ID="rwndManager" VisibleStatusbar="false" Behaviors="Close,Move"
runat="server" EnableShadow="true">
<Windows>
<telerik:RadWindow ID="rwndCategoryEdit" runat="server" Title="Product Details" VisibleStatusbar="false"
Width="470px" Height="540px" ReloadOnShow="true" ShowContentDuringLoad="false"
Modal="true" />
</Windows>
</telerik:RadWindowManager>
</div>
</form>
</body>
</html>
aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Radpopup.aspx.cs" Inherits="CleanTestPopup_Radpopup" %>
<!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 id="Head1" runat="server">
<title></title>
<script src="../Javascripts/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table width="600px" height="100">
<tr>
<td width="150">
</td>
<td width="150">
</td>
<td width="150">
</td>
<td width="150">
</td>
</tr>
<tr height="20">
<td>
Product category
</td>
<td>
<asp:DropDownList ID="ddCategory" runat="server" Width="100%" AutoPostBack="True"
OnSelectedIndexChanged="ddCategory_SelectedIndexChanged">
<asp:ListItem>Select category</asp:ListItem>
<asp:ListItem>Category1</asp:ListItem>
<asp:ListItem>Category2</asp:ListItem>
</asp:DropDownList>
</td>
<td>
Product subcategory
</td>
<td>
<asp:DropDownList ID="ddSubCategory" runat="server" Width="100%">
<asp:ListItem>Select subcategory</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr height="20">
<td>
Product name
</td>
<td>
<asp:TextBox ID="txtProduct" runat="server" Width="100%"></asp:TextBox>
</td>
<td>
Description
</td>
<td>
<asp:TextBox ID="txtDescription" runat="server" Width="100%"></asp:TextBox>
</td>
</tr>
<tr height="20">
<td>
</td>
<td align="right">
<asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" />
</td>
<td>
<asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick="Close();return false;" />
</td>
<td>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script language="javascript" type="text/javascript">
function InitNavigateBlocker() {
// Set the indicator if value of the below controls changed
$("input[type='text'], textarea, input[type='password'], input[type='checkbox'], input[type='radio'],select,input[type='file']").bind("change", function () {
// Set the change indicator value to parent page // says that values in the popup window changed
parent.document.getElementById("Hidden_changeind").value = "1";
});
}
$(document).ready(function () {
InitNavigateBlocker();
});
function UpdateandResetChanges() {
//Reset the change indicator value in the popup
valCity = parent.document.getElementById("Hidden_changeind");
valCity.value = "0";
}
function Close() {
GetRadWindow().Close();
}
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
</script>
</form>
</body>
</html>
CS:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class CleanTestPopup_Radpopup : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
protected void ddCategory_SelectedIndexChanged(object sender, EventArgs e)
{
// As we need to give few postbacks in the popup,I write this for example
if (ddCategory.SelectedIndex == 1)
{
ddSubCategory.Items.Add(new ListItem("Select", "Select"));
ddSubCategory.Items.Add(new ListItem("Subcat1-Cat1", "Subcat1-Cat1"));
ddSubCategory.Items.Add(new ListItem("Subcat2-Cat1", "Subcat2-Cat1"));
}
else if (ddCategory.SelectedIndex == 1)
{
ddSubCategory.Items.Add(new ListItem("Select", "Select"));
ddSubCategory.Items.Add(new ListItem("Subcat1-Cat2", "Subcat1-Cat2"));
ddSubCategory.Items.Add(new ListItem("Subcat2-Cat2", "Subcat2-Cat2"));
}
else
{
ddSubCategory.Items.Add(new ListItem("Select", "Select"));
ddSubCategory.Items.Add(new ListItem("Subcat1-Cat", "Subcat1-Cat"));
ddSubCategory.Items.Add(new ListItem("Subcat2-Cat", "Subcat2-Cat"));
}
}
protected void btnUpdate_Click(object sender, EventArgs e)
{
// I write code here for update
// Then calls client side function to reset the change indicator
ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "strScript", "javascript: UpdateandResetChanges()", true);
}
}
You are using the client-side API to attach a handler to the OnClientBeforeClose event every time you open the RadWindow and you do not remove this handler. This means that the function you add will be executed once for every time it is added - 2 times on the second show, 3 on the third, etc. This is the reason why I used the server-side property OnClientBeforeClose in my example to add the handler so that it is added only once. What I would recommend is that you rework your code like this:
function showpopup() { document.getElementById("Hidden_changeind").value = "0"; varWnd = radopen("Radpopup.aspx", "rwndCategoryEdit"); varWnd.maximize(); }<telerik:RadWindowManager ID="rwndManager" VisibleStatusbar="false" Behaviors="Close,Move" runat="server" EnableShadow="true"> <Windows> <telerik:RadWindow ID="rwndCategoryEdit" runat="server" Title="Product Details" VisibleStatusbar="false" Width="470px" Height="540px" ReloadOnShow="true" ShowContentDuringLoad="false" Modal="true" OnClientBeforeClose="OnClientBeforeClose2"/> </Windows> </telerik:RadWindowManager>aw
Kind regards,
Marin
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
Rank 1
Sorry for the late reply.
I applied your code given below. It works fine now.Thank you very much for your excellent and timely support.I will get back to you in case of any issues.