Complicated RADWindow OnClientClose/__doPostBack scenario

2 posts, 0 answers
  1. Chris T.
    Chris T. avatar
    26 posts
    Member since:
    Apr 2008

    Posted 15 Nov 2008 Link to this post

    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
  2. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 16 Nov 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top