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

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

1 Answer 14 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 10 Mar 2014, 03:16 PM
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?

1 Answer, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 13 Mar 2014, 02:12 PM
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.

 
Tags
Ajax
Asked by
Matt
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Share this question
or