Update grid on Control 2 grid from page launched from Control 2

2 posts, 0 answers
  1. Matt
    Matt avatar
    78 posts
    Member since:
    Mar 2009

    Posted 10 Mar 2014 Link to this post

    I have a page with two user controls on it (UC1 is a results grid and UC2 is a search control).  UC1 is loaded automatically when the page loads based on the query string.  When the user interacts with UC2 (either by entering text in a basic search box or by launching an advanced search window), the results appear in UC1.  I add an AjaxSetting on UC1 such that when the user interacts with it (e.g., opens an item in the grid, deletes an item via the toolbar, etc.), the loading panel appears over the grid, however, I'm unable to get the same results when users interact with UC2.

    Here's the beginning of the page where the two controls are defined (I snipped it before the script block):

    <%@ Page Language="C#" MasterPageFile="~/MyApplication.Master" AutoEventWireup="true" EnableTheming="true" CodeBehind="Worklist.aspx.cs" Inherits="MyApplication.Worklist" %>
     
    <%@ Register Src="ToolkitForms/UserControls/ExtendedActionWorklist.ascx" TagName="ActionWorklist" TagPrefix="uc1" %>
    <%@ Register Src="UserControls/ObjectSearch.ascx" TagName="ObjectSearch" TagPrefix="uc2" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <asp:Content ID="WorklistContent" runat="server" ContentPlaceHolderID="ActivatorBody">
         
        <table style="background-color: Transparent; width: 100%;">
            <tr>
                <td align="left">
                    <div id="createdMessage" style="background-color: Transparent; float: left; font-weight: bold; font-size: small; padding: 8px 0 0 10px;"></div>
                </td>
                <td align="right">
                    <uc2:ObjectSearch ID="SimpleSearch" runat="server" />
                </td>
            </tr>
        </table>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px"></telerik:RadAjaxLoadingPanel>
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
        <div style="background-color: #E1EDFF; width: 100%; position: fixed; overflow: auto;">
            <uc1:ActionWorklist ID="ActionWorklist2" runat="server" Height="500px" SetGridMaxHeight="true" GridPageHeightOffset="40" />
        </div>

    Note:  The RadAjaxManager is defined on the master page.

    I then attach the Ajax events in the code behind on Page_Load as follows:

    RadAjaxManager manager = RadAjaxManager.GetCurrent( Page );
    manager.AjaxSettings.AddAjaxSetting( ActionWorklist2, ActionWorklist2, RadAjaxLoadingPanel1 );
    manager.AjaxSettings.AddAjaxSetting( SimpleSearch, ActionWorklist2, RadAjaxLoadingPanel1 );

    The loading panel works (e.g., the transparency appears above the grid while it refreshes) when the user interacts with UC1, but not when they interact with UC2.

    What else do I need to do to accomplish this?
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 13 Mar 2014 Link to this post

    Hi Matt,

    I would suggest you to try wrapping the userControls into asp Panel controls and add these panels into the RadAjaxManager settings instead of the UserControls directly.
    <asp:Content ID="WorklistContent" runat="server" ContentPlaceHolderID="ActivatorBody">
          
        <table style="background-color: Transparent; width: 100%;">
            <tr>
                <td align="left">
                    <div id="createdMessage" style="background-color: Transparent; float: left; font-weight: bold; font-size: small; padding: 8px 0 0 10px;"></div>
                </td>
                <td align="right">
    <asp:Panel runat="server" ID="SearchPanel" height="100%">
                    <uc2:ObjectSearch ID="SimpleSearch" runat="server" />
    </asp:Panel>
                </td>
            </tr>
        </table>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px"></telerik:RadAjaxLoadingPanel>
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
        <div style="background-color: #E1EDFF; width: 100%; position: fixed; overflow: auto;">
    <asp:Panel runat="server" ID="ActionPanel" height="100%">
            <uc1:ActionWorklist ID="ActionWorklist2" runat="server" Height="500px" SetGridMaxHeight="true" GridPageHeightOffset="40" />
    </asp:Panel>
        </div>

    RadAjaxManager manager = RadAjaxManager.GetCurrent( Page );
    manager.AjaxSettings.AddAjaxSetting( ActionPanel, ActionPanel, RadAjaxLoadingPanel1 );
    manager.AjaxSettings.AddAjaxSetting( SearchPanel, ActionPanel, RadAjaxLoadingPanel1 );

    Note that the RadAjaxManager expecting controls that implements IPostBack event Handler to be added as Ajax initiators or updated controls and the UserControls are not such kind of post back controls.
    Also please set height for the Panel containers so that the LoadingPanel could properly appear on the sized element.

    Give these suggestions a try and let me know if this works for you.

    Regards,
    Maria Ilieva
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top