This is a migrated thread and some comments may be shown as answers.

Complicated RADWindow OnClientClose/__doPostBack scenario

1 Answer 247 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Chris T. asked on 15 Nov 2008, 07:19 PM

Title cryptic enough for you? Heh...it was the best I could come up with.

Here's the deal. A linkbutton opens a RADWindow, on which users select some information, and database changes are made. When I get back to the parent page (which is a content page with a master), I need to refresh some things...in my first case, a RADGrid and a FormView.

Since I'm not on the master page (which has the ajax manager), I didn't assume I could do an ajaxRequest to the CodeBehind of the content page...it would go to the CodeBehind of the master page, right? So I came up with this:

                        function OnClientClose(radWindow) {         
                  __doPostBack("<%=fvNameName.ClientID%>",radWindow.argument);         
                  return false;         
                }         

In my content page CodeBehind's Page_Load, I have:

                        if (Page.IsPostBack) {         
                  // Figure out what to refresh         
                  switch (Request.Params["__EVENTARGUMENT"]) {         
                    case "IncidentNameVariant":         
                      fvNameName.DataBind();         
                      gvName.Rebind();         
                      break;         
                    default:         
                      break;         
                  }         
                }         

In the RADAjaxManagerProxy I've configured fvNameName to update gvName (the RADGrid) and itself (the FormView).

When I set a breakpoint, I can see that both the RADGrid and the FormView have loading panels showing, as if they are being updated. But when I get back to the page, only the FormView reflects the changes I made in the database.

If I change the __doPostBack to use the RADGrid's client id as such:

                    __doPostBack("<%=gvName.ClientID%>",radWindow.argument);         

then only the RADGrid shows the new information.

I'm a bit stumped...can someone point me to a way to refresh two, three or even more separate components in one shot?

thanks,

-Chris

1 Answer, 1 is accepted

answered on 17 Nov 2008, 05:37 AM

Hi Chris,

When you send a postback to the server, only controls set up in the UpdatedControls section will be updated. One option is to wrap the controls you want updated in a Panel and have that Panel be the updated control. You should note that you also don't have to use the __doPostBack() function. You can still call the ajaxRequest() function from your content page by getting a reference to the RadAjaxManager on your master page. To get the reference, simple call the RadAjaxManager.GetCurrent() static method.

Here is an example to demonstrate what I think you are trying to do:

Master.Master

    
            <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" Inherits="Telerik.Examples.Master" %> 
        
            <%@ 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 runat="server"> 
        
                <title>Example - Refresh Controls when RadWindow is Closed</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="Panel1"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="Label1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                    <asp:Label ID="Label1" runat="server" /> 
        
                    <asp:Panel ID="Panel1" runat="server"> 
        
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" /> 
        
                    </asp:Panel>         
        
                </form> 
        
            </body> 
        
            </html>

Master.Master.cs

    
            using System; 
        
            using Telerik.Web.UI; 
        
            namespace Telerik.Examples 
        
            { 
        
                public partial class Master : System.Web.UI.MasterPage 
        
                { 
        
                    protected void Page_Load(object sender, EventArgs e) 
        
                    { 
        
                        Label1.Text = String.Format("Last Update: {0}", DateTime.Now.ToString()); 
        
                    } 
        
                } 
        
            }

Default.aspx

    
            <%@ Page Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Telerik.Examples.Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
        
                <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server"> 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="Panel1"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />                  
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManagerProxy> 
        
                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
                    <script type="text/javascript"> 
        
                        function refreshData() { 
        
                            var ajaxManager = $find('<%= RadAjaxManager.GetCurrent(this).ClientID %>'); 
        
                            ajaxManager.ajaxRequestWithTarget('<%= RadGrid1.ClientID %>'); 
        
                        } 
        
                    </script> 
        
                </telerik:RadCodeBlock> 
        
                <asp:Panel ID="Panel1" runat="server"> 
        
                    <telerik:RadGrid ID="RadGrid1" runat="server" 
        
                        AllowPaging="true" 
        
                        AutoGenerateColumns="true" 
        
                        DataSourceID="SqlDataSource1" 
        
                        OnPreRender="RadGrid1_PreRender" 
        
                        PageSize="10"> 
        
                    </telerik:RadGrid> 
        
                    <asp:FormView ID="FormView1" runat="server" 
        
                        DataSourceID="SqlDataSource1" 
        
                        OnPreRender="FormView1_PreRender"> 
        
                        <ItemTemplate> 
        
                            <div> 
        
                                Product Name: 
        
                                <%# Eval("ProductName") %> 
        
                            </div> 
        
                            <div> 
        
                                Product Category: 
        
                                <%# Eval("CategoryName") %> 
        
                            </div> 
        
                        </ItemTemplate> 
        
                    </asp:FormView> 
        
                </asp:Panel> 
        
                <telerik:RadWindow ID="RadWindow1" runat="server" 
        
                    Height="550px" 
        
                    NavigateUrl="RadWindow.aspx"  
        
                    VisibleOnPageLoad="true"> 
        
                </telerik:RadWindow> 
        
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" 
        
                    BackColor="White" 
        
                    Transparency="20"> 
        
                    <img alt="Loading..."  
        
                         src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
        
                         style="border: 0px; margin-top: 150px;" /> 
        
                </telerik:RadAjaxLoadingPanel> 
        
                <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
        
                    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"  
        
                    SelectCommand="SELECT Products.ProductID, Products.ProductName, Products.CategoryID, Categories.CategoryName, Products.UnitPrice, Products.UnitsInStock FROM Categories INNER JOIN Products ON Categories.CategoryID = Products.CategoryID"> 
        
                </asp:SqlDataSource> 
        
            </asp:Content>

Default.aspx.cs

    
            using System; 
        
            namespace Telerik.Examples 
        
            { 
        
                public partial class Default : System.Web.UI.Page 
        
                { 
        
                    protected void FormView1_PreRender(object sender, EventArgs e) 
        
                    { 
        
                        FormView1.DataBind(); 
        
                    } 
        
                    protected void RadGrid1_PreRender(object sender, EventArgs e) 
        
                    { 
        
                        RadGrid1.Rebind(); 
        
                    } 
        
                } 
        
            }

RadWindow.aspx

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadWindow.aspx.cs" Inherits="Telerik.Examples.RadWindow" %> 
        
            <%@ 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 runat="server"> 
        
                <title>RadWindow - Update Product Categories</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />       
        
                    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
                        <script type="text/javascript"> 
        
                            function GetRadWindow() { 
        
                                var oWindow = null; 
        
                                if (window.radWindow) 
        
                                    oWindow = window.radWindow;  
        
                                else if (window.frameElement.radWindow) 
        
                                    oWindow = window.frameElement.radWindow; 
        
                                return oWindow; 
        
                            } 
        
                            function AjaxManager_ResponseEnd(sender, args) { 
        
                                var radWindow = GetRadWindow(); 
        
                                radWindow.close(); 
        
                                radWindow.BrowserWindow.refreshData(); 
        
                            } 
        
                        </script> 
        
                    </telerik:RadCodeBlock> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="RadGrid1"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl  
        
                                        ControlID="RadGrid1" 
        
                                        LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                        <ClientEvents OnResponseEnd="AjaxManager_ResponseEnd" /> 
        
                    </telerik:RadAjaxManager> 
        
                    <h3>Update Product Categories</h3> 
        
                    <telerik:RadGrid ID="RadGrid1" runat="server" 
        
                        AllowMultiRowEdit="true" 
        
                        AllowPaging="true" 
        
                        AutoGenerateColumns="false" 
        
                        DataSourceID="SqlDataSource1" 
        
                        OnItemCommand="RadGrid1_ItemCommand" 
        
                        OnPreRender="RadGrid1_PreRender" 
        
                        PageSize="10"> 
        
                        <MasterTableView  
        
                            CommandItemDisplay="Bottom" 
        
                            DataKeyNames="ProductID, CategoryID" 
        
                            EditMode="InPlace"> 
        
                            <Columns> 
        
                                <telerik:GridBoundColumn 
        
                                    DataField="ProductName" 
        
                                    HeaderText="Product"> 
        
                                </telerik:GridBoundColumn> 
        
                                <telerik:GridDropDownColumn  
        
                                    DataField="CategoryID"  
        
                                    DataSourceID="SqlDataSource2" 
        
                                    HeaderText="Category" 
        
                                    ListTextField="CategoryName" 
        
                                    ListValueField="CategoryID" 
        
                                    UniqueName="Category"> 
        
                                </telerik:GridDropDownColumn> 
        
                            </Columns> 
        
                            <CommandItemTemplate> 
        
                                <asp:Button ID="Button1" runat="server"  
        
                                    CommandName="UpdateAll" 
        
                                    Text="Update All" /> 
        
                            </CommandItemTemplate> 
        
                        </MasterTableView> 
        
                    </telerik:RadGrid>       
        
                    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" 
        
                        BackColor="White" 
        
                        Transparency="20"> 
        
                        <img alt="Loading..."  
        
                             src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
        
                             style="border: 0px; margin-top: 150px;" /> 
        
                    </telerik:RadAjaxLoadingPanel> 
        
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
        
                        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"  
        
                        SelectCommand="SELECT Products.ProductID, Products.ProductName, Products.CategoryID, Categories.CategoryName, Products.UnitPrice, Products.UnitsInStock FROM Categories INNER JOIN Products ON Categories.CategoryID = Products.CategoryID"> 
        
                    </asp:SqlDataSource> 
        
                    <asp:SqlDataSource ID="SqlDataSource2" runat="server"  
        
                        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"  
        
                        SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"> 
        
                    </asp:SqlDataSource> 
        
                </form> 
        
            </body> 
        
            </html>

RadWindows.aspx.cs

    
            using System; 
        
            using System.Collections; 
        
            using Telerik.Web.UI; 
        
            namespace Telerik.Examples 
        
            { 
        
                public partial class RadWindow : System.Web.UI.Page 
        
                { 
        
                    protected void RadGrid1_PreRender(object sender, EventArgs e) 
        
                    { 
        
                        foreach (GridItem item in RadGrid1.MasterTableView.Items) 
        
                        { 
        
                            var editableItem = item as GridEditableItem; 
        
                            if (item != null) 
        
                            { 
        
                                editableItem.Edit = true; 
        
                            } 
        
                        } 
        
                        RadGrid1.Rebind(); 
        
                    } 
        
                    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e) 
        
                    { 
        
                        if (e.CommandName == "UpdateAll") 
        
                        { 
        
                            foreach (GridEditableItem editableItem in RadGrid1.EditItems) 
        
                            { 
        
                                var newValues = new Hashtable(); 
        
                                e.Item.OwnerTableView.ExtractValuesFromItem(newValues, editableItem); 
        
                                var productID = Convert.ToString(editableItem.GetDataKeyValue("ProductID")); 
        
                                var categoryID = Convert.ToString(newValues["CategoryID"]); 
        
                                SqlDataSource1.UpdateCommand = String.Format("UPDATE Products SET CategoryID='{0}' WHERE ProductID='{1}'", categoryID, productID); 
        
                                SqlDataSource1.Update(); 
        
                            } 
        
                        } 
        
                        RadGrid1.Rebind(); 
        
                    } 
        
                } 
        
            }

I hope this example helps. Please let me know if you have any more questions.

Regards,
Kevin Babcock

P.S. I've zipped up the example and uploaded it. You are welcome to download it from here.