RadAjaxPanel Trigger update AFTER server side event

[Steve Keating]

All,

Here's my scenario:

I have multiple RadAjaxPanels on a page (for simplification i'll say 2)  Panel A and Panel B.  Panel A contains a PanelBar for navigation of the site and Panel B is essentially a content area that dynamically loads User Controls.  When a user clicks on an item in the PanelBar in Panel A, it fires a server-side event which handles loading of the user control.  After the event fires I need the AjaxPanel (Panel B) to refresh and re-render it's content thus displaying the newly loaded user control to the user. 

I've tried several ways of accomplishing this to no avail.  Here's what I've tried:

1) Assigning a forced __doPostBack() to one of the client side OnItemClick events.  This does force the refresh but since it is assigned to the client side event it fires Before the server side event which is before the new user control is even loaded.

2) Using the following syntax from the online help and making this call after the event loads the user control RadAjaxPanel.ResponseScripts.Add(String.Format("$find('{0}').ajaxRequest();", RadAjaxPanel.ClientID))

Where RadAjaxPanel is replaced by the name of the AjaxPanel i'm trying to update in the application. 

If I use .ClientID I've been getting back an JScript error of 'Object does not support this method or property', whereas conversely if I use .UniqueID i get an 'Object is undefined or null' error.

3) Tried using a Page.RegisterStartupScript which registers a .js that forces the refresh through a __doPostBack();  Also tried ClientScripts.RegisterStartupScript.

All of this has been to no avail so far.  I've traced through the code and the new user control is being loaded properly and being added to the control tree.  If I do a f5 refresh on the page, the control shows up just fine because i'm using the LatestLoadedControl mechanism defined in the telerik help for loading user controls.  However, this is unacceptable as Panel B doesn't refresh it's content until f5 is hit for a page refresh. 

Can anyone please point me in the right direction?? I would Really appreciate any help anyone can give on this.  So close, yet so far!

Thanks,
SK

[Steve Keating]

All,

More than 24 hours, several new gray hairs, and several fewer normal hairs less, I have solved this scenario and thought I would provide my findings here for anyone dealing with any aspects of this complex scenario.

First of all, in order to fire a javascript After a server-side event, this requires the use of the ScriptManager.RegisterClientScript Function

ScriptManager.RegisterClientScriptBlock(

Me, Me.GetType, "Refresh Content Area", _

"<script type=""text/javascript"">function pageLoad(){{alert(__doPostBack(GetContentPane(), null));}}</script>", False)

This code can be called on the return from a custom event handler As i am doing forcing it to run After the server-side event has completed

Public Sub ContentArea_ContentChanged(ByVal sender As Object, ByVal e As ContentAreaChangeEventArgs) Implements IContentAreaLoadEvents.ContentArea_ContentChanged

Dim ctrl = LoadUserControl(e.UserControl())

ScriptManager.RegisterClientScriptBlock(Me, Me.GetType, "GridContextMenuScript", _

"<script type=""text/javascript"">function pageLoad(){{alert(__doPostBack(GetContentPane(), null));}}</script>", False)

End Sub

As can be seen, ContentArea_ContentChanged is an interface method defined in my ContentPageBase class which is inherited by all content pages to be matched with a corresponding master page.  This method is attached in codebehind as a custom eventhandler in the page using addhandler method. 

Life cycle is :  User clicks item in PanelBar (navbar), navbar fires server side event defined above, event loads new user control, upon return of loadusercontrol server forces page to reresh with dynamically injected scripts!  very cool!

Few Last Notes:  Notice the GetContentPane() call in the __doPostBack() method.  This is because you have to have a reference to the control to initiate the postback request and from what I can tell, since the script is dynamically injected you can't use a RadScriptBlock to enclose the script and thus the <%= Object.ID %> syntax never gets rendered.  I could be wrong on this but i could never get it to work using <%= %> syntax.
On the Master page i define a function:

<script type="text/javascript" >

function GetContentPane(){

var cpane = document.getElementById('<%=CastnetContentPane.UniqueID %>');

return cpane;

}

</script>

This is enclosed in a function call vs simply naming a var and assigning it because outside of a function the declaration is run as soon as it is parsed in the page which is long before the page is fully loaded and thus always returns null.  Placing it inside a function guarantees that it is called only when the dynamic script is injected which is long after the page is fully loaded.

Sorry for such a long post all but this seemed like very useful information as I just spent the better part of 2 days trying to put this together.

Thanks,
sk

[Steve Keating]

Telerik,

Really hope you catch this after these long posts.  I have the rendering of the User Control working properly as seen above using the __doPostBack('name of target RadAjaxPanel',''); 

However, this runs through the entire page life cycle and although its fast, redraws the entire page...which is not quite the functionality i'm looking for.  What I really want to do is redraw ONLY the RadAjaxPanel with the updated content.  Is there a way to accomplish this?

Have been trying to use .ajaxRequest() or .ajaxRequestWithTarget but since these are being dynamically injected, they get run before onload event so all the control references are always null...  Any workaround or direction would be extremely appreciated!

Thanks,
sk

[Nikolay Rusev]

Hello Steve,

As I understand from your previous posts, you have a scenario in which a control (ControlA) which is inside a RadAjaxPanel(PanelA) must force another RadAjaxPanel(PanelB) to render itself when event occurs on ControlA.

This can be achieved if you listen for the AjaxSettingCreating event of PanelB and add ControlA as AsyncPostBackTrigger in the triggers collection for PanelB. Thus when ControlA event is fired PanelB will post back and render its content. 

/for example/

protected void RadAjaxPanel2_AjaxSettingCreating(object sender, AjaxSettingCreatingEventArgs e)
    {
        AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
        trigger.ControlID = Button1.ID;
        e.UpdatePanel.Triggers.Add(trigger);
    }

I am sending you an application which illustrates simplified version of this approach (find it attached to this forum post).

Kind regards,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steve Keating]

Telerik,

Thanks for the reply.  This seems to be the solution I need, however, I'm having trouble integrating it into my project. 

The exact scenario is such: 
I have a master page which defines 5 RadAjaxPanels (navbar, content, heading, toolbar,  and breadcrumb (not telerik breadcrumbs)).

Navbar contains a a user control (navigation.ascx) which contains the RadPanelBar
When the user clicks on an item in the RadPanelBar, it needs to update the content in content, heading, and breadcrumb panels. The click of the RadPanelBar is handled in a server side event and works fine but I need for the panels to update on the tail end of this event.

the ContentPage inherits a ContentPageBase class which in turn inherits System.Web.UI.Page (for abstracting functionality away from the pages to make it inheritable by all pages)

No matter where I place the AjaxSettingsCreating event handler you defined, it never seems to fire (set breakpoints to test).  Not in the content page, master page, or the inherited class even if i define withevents variables and/or obtain references to the controls. 

The Demo works great,

What am I missing?

Thanks!
sk

[Steve Keating]

Never Mind, Found it.  I didn't see the OnAjaxSettingsCreating="" in the control tag.

Thanks!
SK

[Steve Keating]

Telerik,

You guys Rock!  Got it all wired up properly and it works like a charm!

Thank you SOO much!

Telerik Controls are a beautiful Thing!  If you don't have them, YOU SHOULD BUY THEM!

SK

[Steve Keating]

Telerik,

Sorry to keep bothering you with this but now that I've gotten the dynamic loading and refresh taken care of I have another new problem:  Once i dynamically load the user control to the content AjaxPanel, it shows up wonderfully but the HTML of the page (when doing a view source) is not being updated (it still contains the html rendered by initially loaded user control).  So i see the new control but it doesn't exist in the html?

From what I've read this is because it's not wrapped in an element that always renedered so I tried adding div tags around the area being loaded to, tried using a Placeholder, and all of this is inside a RadPane inside a RadSplitter so the user control is definitely being loaded inside an element that is always rendered.  Also, the scripts for the Splitter panes and other controls inside the updated RadAjaxPanel stop working, even though i've added the EnableOutsideScripts="true" property to the panels.  Am definitely confused.

Any help is greatly appreciated!

Thanks,
SK

[Nikolay Rusev]

Hi Steve,

You do not see the source of dynamically created controls because they are attached to the page content during partial update. Thus when you choose View Source option of your browser you cannot see the controls in the markup. Anyway if you are using Firefox with WebDeveloper toolbar and choose View Generated Source you will see the entire markup including dynamically created controls.

Regarding your second issue I suggest submitting a regular support ticket where you can send a sample application which replicates the problem and add your findings there as well. Thank you!

All the best,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Shane Stiles]

I have been able to successfully implement this as long as both AjaxPanels are in the same asp:content control, how if they are in different asp:content containers I get an error:

A control with ID 'wizard' could not be found for the trigger in UpdatePanel 'ctl00$Content1$apnlNavigationPanel'.

do you have any ideas?

[Nikolay Rusev]

Hello Shane,

Because the button in first RadAjaxPanel is no longer in the same NamingContainer with the second RadAjaxPanel you will have to assign its UniqueID instead of just ID. AjaxSettingCreating should look like shown below

protected void RadAjaxPanel2_AjaxSettingCreating(object sender, Telerik.Web.UI.AjaxSettingCreatingEventArgs e)
    {
        AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
        trigger.ControlID = Button1.UniqueID;
        e.UpdatePanel.Triggers.Add(trigger);
    }

For your convenience I am attaching a sample project.

Kind regards,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Raviraj]

Hi All,

I have one hidden field in master page. I have created the property for this hidden field so that I am able to update the value of this hidden field from content page.
It works fine when there is no RadAjaxPanel in content page.
But if event get fired with the controls which are inside RadAjaxPanel in content page then the value of hidden field dosent get updated.
I have palced the hidden field in another RadAjaxPanel but still it is not working. In Update panel there is one property i.e. UpdateMode = "Always". I didn't found such property in RadAjaxPane. I just want,  hidden field should get updated for every sync or async postback always.

[Sean]

Telerik, I know this is an old post, but I have the same issue. My server side event handler updates a property, and I need to be able to get that property in an includes tag on the client side javascript. Is this possible?

Thanks very much.

Sean

[Nikolay Rusev]

Sean, I do not understand what you are meaning by saying "I need to be able to get that property in an includes tag on the client side javascript". Can you explain?

By ajaxifying server control on ajax postback all it's properties that will normally be serialized on client will be updated by the UpdatePanel.

Greetings,
Nikolay
the Telerik team

[Sean]

Sorry. I meant to come back and comment here, but I couldn't find it again. I found another post telling me to use the RadScriptBlock, and that let the values update dynamically. All is well. Thank you.

[Rohan]

Hi all ,
I want to update the control in radajaxpanel on delegate event which is caused by user control .
please provide any example or document ....

[Maria Ilieva]

Hello Rohan,

Could you please elaborate a bit more on the excat scenario you are implementing and the ajax setting you have in your application? Thus we will be able to provide proper solution for your specific case.

Greetings,
Maria Ilieva
the Telerik team

[Rohan]

Hi Maria ,

Thanks for your relay .

I want to update control in Radajaxpanel .

My scenario is
I have one user control which works for search the records and returns the value , to return value to parent page i am using delegate.
This delegate gets selected value to my page and update parent page control .
after putting these controls in radajaxpanel it does not show the updated values or text or selected value of control,
but this scenario works with update panel using UpdatePanel.Update() method ...
is there any way to update control on RADAAJXPanel .... please provide any document or sample example ......
Once again thanks for replay ......
Thanks

[Maria Ilieva]

Hi Rohan,

The RadAjaxPanel does not provide such server Update() method however you could use its client ajaxRequest function to invoke ajax and update the needed content. If this need to be done on the server you could register a client script on the server calling this function.
Another option would be using RadAjaxManager as described in the other forum post you have opened on the same matter.

Kind regards,
Maria Ilieva
the Telerik team