Rank 1
I've run into an issue using modal popups and controls on a page, and I've created a test scenario. What I'm trying to do is, when the user submits a form to save data to a database, the application first validates if everything is correct. If not, display a modal popup. This works find the first time I press "Save Data" in my test, but the 2nd time, any bound controls seem to lose their values. For example, the line -
Dim value As String = RadComboBox1.SelectedItem.Valuegives an 'Object reference not set to an instance of an object" error. Do I have to rebind every control on the page in the code-behind, or is there a better way to do this? Is this happening because I'm putting the RadWindowManager into the AjaxPanel? (I read a bit of documentation about it, but I couldn't clearly understand it).
EDIT: It also happens with another control (button) that does a postback. While rebinding does prevent the "Object Reference..." error, it loses its' selected value.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="AjaxTest.aspx.vb" Inherits="ModalTest.AjaxTest" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
</telerik:RadScriptManager>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="WebBlue">
</telerik:RadWindowManager>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
</telerik:RadAjaxPanel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadButton1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="RadAjaxPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<telerik:RadButton ID="btnSave" runat="server" Text="Save Data">
</telerik:RadButton>
<telerik:RadLabel ID="RadLabel1" runat="server">
</telerik:RadLabel>
<telerik:RadComboBox ID="RadComboBox1" Runat="server" DataSourceID="SqlDataSource1" DataTextField="Title" DataValueField="ID">
</telerik:RadComboBox>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AppConnectionString %>" SelectCommand="SELECT [ID], [Title] FROM [luTest]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
Imports Telerik.Web.UI
Public Class AjaxTest
Inherits System.Web.UI.Page
Protected Sub RadButton1_Click(sender As Object, e As EventArgs) Handles btnSave.Click
' Simulate Data Validation.
RadAjaxPanel1.Controls.Clear()
RadAjaxPanel1.Controls.Add(RadWindowManager1)
' The commented out code also works, but the dropdown still loses its' values.
RadWindowManager1.Windows.Clear()
RadWindowManager1.RadAlert("Test Validation Message", 330, 180, "Error", "")
' CreateModalWindow(RadWindowManager1, "mModal\Modal.aspx")
' Simulating collecting data for saving to a database table.
Dim value As String = RadComboBox1.SelectedItem.Value
End Sub
Private Sub CreateModalWindow(WindowManager As RadWindowManager, url As String)
Dim RadWindow1 As New RadWindow
With RadWindow1
.ID = "rwTest"
.Height = 600
.Width = 800
.Title = "Title"
.DestroyOnClose = True
.Skin = "WebBlue"
.Modal = True
.NavigateUrl = url
End With
WindowManager.Windows.Clear()
WindowManager.Windows.Add(RadWindow1)
Dim PageHandler As Page = HttpContext.Current.Handler
Dim script As String = "function f(){$find(""" + RadWindow1.ClientID + """).show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);"
RadAjaxPanel1.ResponseScripts.Add(script)
ScriptManager.RegisterStartupScript(PageHandler, PageHandler.GetType(), "key", script, True)
End Sub
End Class
Hi Jeniffer,
As explained in the How to Use RadWindow with AJAX article, RadWindow is a container control, which often has to host a number of controls that need to perform AJAX requests or be updated via AJAX. This sometimes presents a difficulty, because the RadWindow's content is moved in the DOM tree when it is created - i.e. the child controls are not in the same place in the generated HTML where they are in the ASPX markup. This may break the functionality of the update panels, as they use the innerHTML property to update their child controls, which have moved and are not available. The result from attempting to perform such an update may vary - from nothing to a server error that the update panel cannot be unregistered. For more information on the latter see this KB article.
A common problem when using a RadWindow instance with AJAX is that the popup still closes, even though its content is properly configured to invoke AJAX requests. The most common cause for this is that the RadWindow markup is still inside an UpdatePanel or AjaxSetting, so it disposes with the response, and thus its popup element is lost because it is generated with HTML only when it shows for the first time. To avoid this, you must make sure such RadWindows are not included in the partial page rendering at all, only the controls in their ContentTemplates should be. Common causes are UpdatePanels with UpdateMode set to Always that include the RadWindow, or UpdatePanels/AjaxSettings from user controls or master pages on a higher level and you should move the RadWindow out of them, or call its show() client-side method again when needed.
If you are using the RadAjaxManager (as in the concrete case demonstrated in this forum) you should not add the RadWindow as an AJAX initiator or as an updated control. Instead, you should directly use the controls from its ContentTemplate in the AJAX settings.
Generally placing the RadWindow in an update panel (or RadAjaxPanel, or adding it to the RadAjaxManager's AJAX settings) is not recommended, because the rendered HTML is moved from its original location in the markup. This will most often result in the expected functionality simply not working as with the databinding in this case.