callback error from a nested XmlHttpPanel

[Jason]

Hi,

I have a page with multi XmlhttpPanels, including a parent panel and a number of children panels which are placed inside an asp repeater. The error happens when run set_value() for any children panel. I have set the script manager to the standard asp script manager on the page, and the EnableClientScriptEvaluation is set to true in the parent panel. Not sure if xmlhttppanel supports nesting. All works fine if I remove the parent panel.  

The below is the error screenshot and the code. Any help would be much appreciated.

<telerik:RadXmlHttpPanel runat="server" ID="pnlRoom" OnServiceRequest="pnlRoom_ServiceRequest"
    EnableClientScriptEvaluation="true" LoadingPanelID="RadAjaxLoadingPanel1" RenderMode="Block">
    <asp:Repeater runat="server" ID="rptGroups" OnItemDataBound="rptGroups_ItemDataBound"
        ClientIDMode="AutoID">
        <ItemTemplate>
            <fieldset class="fieldsetBlock1">
                <div class="fieldsetTitle">
                    <%# Eval("GROUP_NAME")%>
                </div>
                <telerik:RadXmlHttpPanel runat="server" ID="pnlGroup" OnServiceRequest="pnlGroup_ServiceRequest"
                    RenderMode="Block">
                    <asp:Repeater ID="rptItems" runat="server" EnableViewState="false" ClientIDMode="AutoID">
                        <HeaderTemplate>
                            <table width="574px" class="hor-minimalist-b">
                                <tbody>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <tr>
                                <td style="padding: 12px 8px;">
                                    <a href="javascript:;" onclick='<%# string.Format("openItem(this,{0},0);", Eval("JOB_ITEM_ID")) %>'
                                        class="a-job-item">
                                        <%# Eval("ItemSummary") %></a>
                                </td>
                            </tr>
                        </ItemTemplate>
                        <FooterTemplate>
                            </tbody> </table>
                        </FooterTemplate>
                    </asp:Repeater>
                    <div class="divAddNewLinkButton">
                        <a href="javascript:;" onclick='<%# string.Format("openItem(this,0,{0});", Eval("JOB_ITEM_GROUP_ID")) %>'>
                            <span>✚</span>  New Item</a></div>
                </telerik:RadXmlHttpPanel>
            </fieldset>
        </ItemTemplate>
        <SeparatorTemplate>
            <br />
        </SeparatorTemplate>
    </asp:Repeater>
</telerik:RadXmlHttpPanel>

[Jason]

The problem is fixed. RadXmlHttpPanel does support nesting. Here is what I found, in case someone else encounter the same problem. The issue was because the parent panel didn't have an initial value set when page loaded, it was set value only at postback via javascript. Although updating the parent panel itself works, it causes the callback error when set values to children xmlhttp panels in the repeater. The fixing is to assign a valid value to the parent panel on the initial page loading. The below is the code. Not sure the real cause behind, maybe it is related to the repeater rendering, the page have two repeaters nested.

if (!IsPostBack)
{
  //set a valid value to the parent panel
  pnlRoom.Value = 123;
}

[Jason]

Unfortunately my previous post isn't a fixing. depends on the number of items bound to the repeaters, the error sometimes still pops up.

[Slav]

Hi,

Since I am not sure how the callback is triggered on your end, I created a simple page with two nested RadXmlHttpPanel controls and performed several updates without encountering the mentioned issue. I attached the test page so that you can check it and let me know how it should be changed to reproduce the problem at hand.

Also, the purpose of ​RadXmlHttpPanel in your sample is not quite clear to me. Note that the main purpose of this control is to load presentation data, for example updating a text on the page when a button is clicked. If there are server controls that need to be updated as well, an UpdatePanel or RadAjaxPanel will be more suitable, because ASP.NET Callbacks (which are used in ​RadXmlHttpPanel) do not offer viewstate and the page lifecycle is quite limited. I would suggest checking the following help article on the matter: http://www.telerik.com/help/aspnet-ajax/xmlhttppanel-vs-radajaxpanel.html

If you are using the ​RadXmlHttpPanel controls as UpdatePanels, I would recommend replacing them to avoid difficulties with the missing viewstate and the limited page lifecycle. If this is not the case, describe in detail the functionality you implemented so that I can help you accordingly. A simple, fully runnable sample that isolates the scenario will be very useful for this purpose.


Regards,
Slav
Telerik

 

 

[Jason]

Hi Slav,

I have created a test website for this issue, there are multi code files in the website. but the forum doesn't allow me to attach zip file. Is there any way I can send it to you?

Regards,

Jason

[Jason]

Right, I can post the code files here. also a screenshot of the sample.

The value of the parent panel pnlRoom is set to "1" on default.aspx. There are two groups in the room1, and three groups in the room2. when click on edit button, a popup window will open, submit and close the popup window will refresh the pnlGroup (which contains the edit button) on default.aspx. the error occurs when close the group5 popup window in room2.  It appears to be the call back can only be working up to the number of the repeater items initially loaded up, in this case it is up to 2.

default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!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></title>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadWindowManager ID="RadWindowManager" runat="server" ShowContentDuringLoad="false"
        VisibleStatusbar="false" ReloadOnShow="true" Style="z-index: 7001">
        <Windows>
            <telerik:RadWindow ID="RadWindow1" VisibleOnPageLoad="false" runat="server" Modal="true"
                Behaviors="Move,Close" OnClientClose="refreshPanel">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    <script type="text/javascript">

        function showRoom(roomid) {
            refreshXmlHttpPanel('<%=pnlRoom.ClientID %>', roomid);
        }

        function editGroup(sender, groupid) {
            var grpPnlId = findAncestorId(sender, "RadXmlHttpPanel");
            radopen("Default2.aspx?grpPnlId=" + grpPnlId, "RadWindow1", 500, 300);
        }

        function refreshPanel(sender, args) {
            var oArg = args.get_argument();
            if (oArg) {
                refreshXmlHttpPanel(oArg.pnlId, "1234");
            }
        }

        function refreshXmlHttpPanel(panelId, value) {
            var panel = $find(panelId);
            if (panel && value)
                panel.set_value(value);
        }

        function findAncestorId(el, cls) {
            while ((el = el.parentElement) && !hasClass(el, cls));
            if (el)
                return el.getAttribute('id');
        }

        function hasClass(element, cls) {
            return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
        }

    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div>
        <p>
            <input type="button" value="Room 1" onclick="showRoom(1);" /><input type="button"
                value="Room 2" onclick="showRoom(2);" /></p>
        <telerik:RadXmlHttpPanel runat="server" ID="pnlRoom" Value="1" OnServiceRequest="pnlRoom_ServiceRequest"
            EnableClientScriptEvaluation="true" LoadingPanelID="RadAjaxLoadingPanel1" RenderMode="Block">
            <asp:Repeater runat="server" ID="rptGroups" ClientIDMode="AutoID">
                <ItemTemplate>
                    <telerik:RadXmlHttpPanel runat="server" ID="pnlGroup" OnServiceRequest="pnlGroup_ServiceRequest"
                        RenderMode="Block">
                        <%# Eval("GROUP_NAME") %>
                        <div>
                            <a href="javascript:;" onclick='<%# string.Format("editGroup(this,{0});", Eval("GROUP_ID")) %>'>
                                Edit</a><br />
                            <asp:Label runat="server" ID="lblTime"></asp:Label></div>
                    </telerik:RadXmlHttpPanel>
                </ItemTemplate>
                <SeparatorTemplate>
                    <br />
                </SeparatorTemplate>
            </asp:Repeater>
        </telerik:RadXmlHttpPanel>
    </div>
    </form>
</body>
</html>

default.aspx.cs

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Data;
using System.Configuration;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
using System.Collections.Generic;

public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void pnlRoom_ServiceRequest(object sender, RadXmlHttpPanelEventArgs e)
    {
        var roomId = int.Parse(e.Value);
        var groups = new List<GROUP>();
        if (roomId == 1)
        {
            groups.Add(new GROUP() { GROUP_ID = 1, GROUP_NAME = "GROUP 1" });
            groups.Add(new GROUP() { GROUP_ID = 2, GROUP_NAME = "GROUP 2" });

        }
        else if (roomId == 2)
        {
            groups.Add(new GROUP() { GROUP_ID = 3, GROUP_NAME = "GROUP 3" });
            groups.Add(new GROUP() { GROUP_ID = 4, GROUP_NAME = "GROUP 4" });
            groups.Add(new GROUP() { GROUP_ID = 5, GROUP_NAME = "GROUP 5" });
        }

        rptGroups.DataSource = groups;
        rptGroups.DataBind();
    }

    protected void pnlGroup_ServiceRequest(object sender, RadXmlHttpPanelEventArgs e)
    {
        var xmlPanel = (RadXmlHttpPanel)sender;
        var lblTime = (Label)xmlPanel.FindControl("lblTime");
        lblTime.Text = DateTime.Now.ToLongTimeString();
    }

    public class GROUP
    {
        public int GROUP_ID { get; set; }
        public string GROUP_NAME { get; set; }
        public List<ITEM> ITEMs { get; set; }
    }

    public class ITEM
    {
        public int ITME_ID { get; set; }
        public string ITEM_NAME { get; set; }
    }
}

default2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">

        function returnToParent(groupId) {
            var oArg = new Object();
            oArg.pnlId = "<%=GroupPanelId %>";
            var oWnd = GetRadWindow();
            oWnd.close(oArg);
        }

        function GetRadWindow() {
            var oWindow = null;
            if (window.radWindow) {
                oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog
            } else if (window.frameElement && window.frameElement.radWindow) {
                oWindow = window.frameElement.radWindow; //IE (and Moz as well)
            }
            return oWindow;
        }

    </script>
    <div>
        <p>
            Click the buttton to show current time on the parent window.</p>
        <asp:LinkButton runat="server" Text="Submit and Close" OnClick="btn_Click"></asp:LinkButton>
    </div>
    </form>
</body>
</html>

default2.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    public string GroupPanelId
    {
        get
        {
            return Request.QueryString["grpPnlId"];
        }
    }
    protected void btn_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(),
            this.ClientID + "_CloseWindow", "returnToParent();", true);
    }
}

[Slav]

Hi,

As I mentioned in the previous post, the XmlHttpPanel control is designed for scenarios, in which only HTML is updated somewhere on the page. Due to the limited page life cycle and the missing viewstate when a callback is used, placing ASP.NET controls in the content of a XmlHttpPanel is not recommended.

After inspecting the example you sent, I would suggest replacing the XmlHttpPanel controls with UpdatePanel, RadAjaxPanel or RadAjaxManager.

Regards,
Slav
Telerik