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

Ajax problem when using Ajaxmanager and RadAjaxpanel

7 Answers 279 Views

Ajax

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

Velkumar asked on 18 Nov 2011, 11:52 AM

Hi,

I am using a RadPanel bar with three panel items. I want to load the controls dynamically in each panel item depends on the panel item expanded. I have using the client side event "onclientitemexpand" to generate the postback. In the client side function first i have used the __doPostBack function to initiate the postback. When I am using __doPostBack the page will be refreshed so i move to the following ajaxrequest function "$find("<%=ajaxmanager1.ClientID%>").ajaxRequest("PanelItem");. But nothing will happened that is the page is not postbacked. I attach the code below.

C#

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using Telerik.Web.UI;

using System.Web.UI.WebControls;

public partial class RadPanelDemo : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

CustomContentTemplate1 template1= new CustomContentTemplate1();

CustomContentTemplate2 template2 = new CustomContentTemplate2();

if (IsPostBack)

{

lblpost.Text = "OnPostBack";

}

foreach (RadPanelItem item in RadPanelBar1.Items)

{

if (IsPostBack)

{

Response.Write("post");

item.ContentTemplate = new CustomContentTemplate2();

template2.InstantiateIn(item);

item.DataBind();

}

else

{

Response.Write("load");

item.ContentTemplate = new CustomContentTemplate1();

template1.InstantiateIn(item);

item.DataBind();

}

ajaxmanager1.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(ajaxmanager1_AjaxRequest);

}

void ajaxmanager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

Response.Write(e.Argument);

}

class CustomContentTemplate1 : ITemplate

{

public void InstantiateIn(Control container)

{

Label label1 = new Label();

label1.Font.Bold = true;

label1.DataBinding += new EventHandler(label1_DataBinding);

container.Controls.Add(label1);

}

private void label1_DataBinding(object sender, EventArgs e)

{

Label target = (Label)sender;

RadPanelItem item = (RadPanelItem)target.BindingContainer;

target.Text ="load";

//Alternative way:

//string itemText = (string)DataBinder.Eval(item, "Value"); target.Text = itemText;

}

class CustomContentTemplate2 : ITemplate

{

public void InstantiateIn(Control container)

{

Label label1 = new Label();

label1.Font.Bold = true;

label1.DataBinding += new EventHandler(label1_DataBinding);

container.Controls.Add(label1);

}

private void label1_DataBinding(object sender, EventArgs e)

{

Label target = (Label)sender;

RadPanelItem item = (RadPanelItem)target.BindingContainer;

target.Text = "post";

//Alternative way:

//string itemText = (string)DataBinder.Eval(item, "Value"); target.Text = itemText;

}

class CustomContentTemplate3 : ITemplate

{

public void InstantiateIn(Control container)

{

Label label1 = new Label();

label1.Font.Bold = true;

label1.DataBinding += new EventHandler(label1_DataBinding);

container.Controls.Add(label1);

}

private void label1_DataBinding(object sender, EventArgs e)

{

Label target = (Label)sender;

RadPanelItem item = (RadPanelItem)target.BindingContainer;

target.Text = item.Value;

//Alternative way:

//string itemText = (string)DataBinder.Eval(item, "Value"); target.Text = itemText;

}

ASPX

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

<%@ 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></title>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript" language="javascript">

function OnClientItemExpand(sender, args) {

$find("<%=ajaxmanager1.ClientID%>").ajaxRequest("arguments");

}

</script>

</telerik:RadCodeBlock>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadAjaxManager ID="ajaxmanager1" runat="server" EnableAJAX="true" >

<AjaxSettings >

<telerik:AjaxSetting AjaxControlID="RadPanelBar1" >

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadPanelBar1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">

</telerik:RadScriptManager>

<table width="100%">

<tr style="width:100%">

<td style="width:100%">

<%-- <telerik:RadAjaxPanel ID="panel1" runat="server" EnableAJAX="true" >--%>

<telerik:RadPanelBar ID="RadPanelBar1" onclientitemexpand="OnClientItemExpand" ExpandMode="FullExpandedItem" Width="100%" runat="server">

<Items>

<telerik:RadPanelItem runat="server" Text="Root RadPanelItem1" PostBack="true" Value="A">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Root RadPanelItem2" Value="B">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Root RadPanelItem3" Value="C">

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

<%-- </telerik:RadAjaxPanel>--%>

</td>

</tr>

<tr>

<td>

<asp:Button ID="post" Text="PostBack" runat="server" />

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblpost" Text="Load" runat="server"></asp:Label>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Looking forward your reply.

Kind regards,
Velkumar.

7 Answers, 1 is accepted

answered on 22 Nov 2011, 10:09 AM

Hi Velkumar,

First of all, please move the RadScriptManager declaration above all RadControls, otherwise the RadControls defined before it will never function as expected. The best place for the RadScriptManager/ScriptManager on the page is just after the <form> opening tag and after that you can place the declarations for the rest of the managers, like RadSkinManager, RadStyleSheetManager, RadAjaxManager, RadInputManager, RadFormDecorator. See the below article for more information:
http://www.telerik.com/help/aspnet-ajax/introduction-adding-radcontrols-prometheus-existing-application.html (see the note at the bottom)

Furthermore, you should avoid using more than one ajax controls, e.g. RadAjaxManager, RadAjaxPanel, ASP:UpdatePanel to ajaxify the same page content as you can end us either with multiple errors or unexpected behavior. So in your case, you should either remove the RadAjaxManager or the RadAjaxPanel. If you choose to use the RadAjaxManager, then you need to add a setting where the RadAjaxManager updates the RadPanelBar. If you choose to remove the RadAjaxManager and proceed using the RadAjaPanel in your case, you should call the ajaxRequest() client-side method over the RadAjaxPanel client-side object and handle the RadAjaxPanel AjaxRequest server-side event to load the user controls. For more information on the client-side API of RadAjax and on loading user controls with ajax, you can refer to the below resources:
http://www.telerik.com/help/aspnet-ajax/ajax-ajaxpanel.html
http://www.telerik.com/help/aspnet-ajax/ajax-client-side-api.html
http://www.telerik.com/help/aspnet-ajax/ajax-load-user-controls.html

Greetings,
Iana Tsolova
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 25 Nov 2011, 03:42 PM

Hi Velkumar,

Can you try upgrading to SharePoint 2010 SP1? It includes a fix to a bug which was causing multiple problems with ajax.

Also, please confirm that you moved the ScriptManager definition before this of the RadAjaxManager.

Other than this, if using RadAjaxPanel works for you, you can invoke the manually ajax request through it. The RadAjaxPanel has client-side ajaxRequest() method as well as server-side AjaxRequest event, just as the RadAjaxManager.

Kind regards,
Iana Tsolova
the Telerik team

answered on 30 Nov 2011, 01:21 PM

Hi
      I enter the code

            <telerik:AjaxSetting AjaxControlID="AjaxManagerDemo">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" />
                    </UpdatedControls>

                </telerik:AjaxSetting> Set the Ajax setting for AjaxManger.

Now everything works fine. Now i have another new error in ajax post back. In my page I dynamically added a UserControl(.ascx ) in first panel item of the panelbar. The usercontrol have 2 buttons and one label. I am using radajaxpanel in the usercontrol. After the page load I expanded the first panelitem and clicked the buttons in the usercontrol , postbacks occurs. The button which is present outside the panelbar is clicked, postback occurs.
But after clicking the outside button,no postback will occur for the click event of buttons in the user control and the following error will occur.
Message: Sys.WebForms.PageRequestManagerServerErrorException: An unexpected error has occurred.

and sometimes this error will also occur:-
Message: Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed. Common causes for this error are when the response is modified by calls to Response.Write(), response filters, HttpModules, or server trace is enabled.
Details: Error parsing near 'Telerik.Web.UI 2011.'.

answered on 01 Dec 2011, 09:24 AM

Hi Velkumar,

The second error is comes from our Trial message. Once you upgrade the project so it uses Dev version of the control, this error will not appear anymore.
For the first issue: I am not able to determine the cause of it. For that I will need to debug the case. Therefore I suggest that you send us a runnable version of your scenario in a formal support ticket. When you open the ticket, mention there the ID of this thread so it is clear we are continuing with this case.

Kind regards,
Iana Tsolova
the Telerik team