Ajax call stuffs up the control

[Sergio]

Hello everyone,

I'm currently writing a control that contains a RadPanelBar with several items and a menu. The idea is that when ever an item in the menu is clicked the content on the panel bar should dynamically change (clear and add new items). The problem is that when I make the ajax call and add the items to the panel bar it wont have the normal "animation" behavior and all the items are collapsed (never expand). Funny thing is that it does work on the first load of the page (default load, before clicking anything on the menu) and the method called on load and on the ajax call is exactly the same (just with different id). My guess is that after a page load some sort of js function is called to add events etc to the telerik controls and since this is not called after the ajax post back then it wont work properly...

Any work suggestions?

Thanks in advance!

Sergio

[Nikolay Tsenkov]

Hello Sergio,

How do you add the controls, exactly?

As much as I can understand, you add the controls on run time, and only the first time that they are demanded. But if this is the case it will work exactly until the next postback (ajax refresh etc,).
This is the thing about controls added on run time - they have to be recreated every time the page is being recreated. This usually happens in the Page_Init event.

Could you post some code (as simple as possible) that reproduces your problem, please?

Here is a nice article about the solution that I guess you will need (dynamic templates): http://www.telerik.com/help/aspnet-ajax/panel_add-templates-runtime.html

Hope this is helpful for you!


Regards,
Nikolay Tsenkov
the Telerik team

[Sergio]

Hello Nikolay,

Thanks for your response. I do add the controls on run time, and the same code is ran on page load (control works properly) and on every ajax call (control doesn't work propoerly). Just for information as you can see I'm not using templates, which I think is irrelevant since the controls works properly on first load. Here is my code simplified:

protected void Page_Load(object sender, EventArgs e)

{

myRadPanelBar.Items.Clear();

//Retrieve my content

...

List<ContentWrapper> wrappers = new List<ContentWrapper>();

//Generate pages

foreach (ContentWrapper wrap in wrappers)

{

RadPanelItem item = new RadPanelItem(wrap.Name);

item.CssClass = "selectionItem";

item.ExpandedCssClass = "selectionItemExpanded";

//Generate sub-items within panel items

MyPanel subpane = (MyPanel) LoadControl("MyPanel.ascx");

//Prepare subpane

...

//Done preparing subpane

RadPanelItem subItem = new RadPanelItem();

subItem.Controls.Add(subpane);

item.Items.Add(subItem);

myRadPanelBar.Items.Add(item);

}

        myRadPanelBar.DataBind();

}

Thanks!!

Sergio

[Nikolay Tsenkov]

Hello Sergio,

Well, this is just the problem (and the reason to use templates and not apply them on Page_Load time):
1. The markup is being parsed and the initial controls tree is being created
2. The Page_Init handler is called
- there is no viewstate to apply, so this step doesn't do anything;
3. The Page_Load's handler is called (you add some controls dynamically);
- viewstate is being created
4. The response (the entire rendered page) is sent to the requester
5. On the client event occurs, which is being handled on the server and the page postbacks
-the view state is being sent to the server with this postback, too
6. Repeat 1., 2.
7. Now there is viewstate so the server attempts to apply it on the controls tree, but the tree is not the same as the one represented in the viewstate (your dynamically added controls are not going to be recreated up until Page_Load time) and the viewstate is not being applied correctly.
...

Actually on this stage you should get the controls added on page_load as they first were, so the problem should be only with persisting state. But since they are disappearing completely, I am pretty sure that you have if-statement somewhere at the beginning:

if (!isPostBack)
...

which makes this adding of the controls only the first time Page_Load handler is called (only when it isn't postback).

There is better place to add you controls (better time actually) and it's in the Page_Init handler - it's before the viewstate is being applied. Also you will have to add them every time, not only the first time (just like the structure from the markup is being read and parsed on every postback).

I recommended using templates, because that's what they are all about - adding controls to the nodes. That is what templating is all about.

Hope my answer will give you a better understanding of the lifecycle of the page, the viewstate and the page controls tree recreation.


Regards,
Nikolay Tsenkov
the Telerik team

[Sergio]

Hello again Nikolay,

I think I havent given you enough information to solve this problem, so please accept my apologies.

On the other hand here goes a more detailed description of what is going on.

1- I have a main page, say Main.aspx which is the one that makes all the ajax calls

 this is the page tha contains:

- the menu i was talking about on my first post

- the panel or div (id=myContentPane) that is loaded via an ajax call with a web user control (contentPane.asmx)

Now, the RadPanelBar lies in the contentPane.asmx control and on every post back the myContentPane div is cleared and a new dynamically generated contentPane.asmx (child nodes added on this control page_load) control is added. I hope this gives you a better idea of what I'm doing.

Thanks again!!!

Sergio

 

[Sergio]

Hello Nickolay,

I was able to work it out, the problem was the fact that I had the rad control inside a web control and I was creating a new web user control on every post back. I got rid of that In between control and have the rad panel on my main aspx (since it was the only control there was not much difference).

Thanks for your support!

Sergio

[Nikolay Tsenkov]

Hi Sergio,

Glad that I could help and great that you managed to resolve it after all!


Greetings,
Nikolay Tsenkov
the Telerik team