Using AjaxManager to turn ASP Panels into 'queued' RadAjaxPanels

[paulo.galão]

Hi there,

I'm trying to migrate to RadControls for ASP.NET Ajax but I'm finding a few difficulties. In my existing application I am using AjaxManager (with RadControls for ASP.NET, not the version) to ‘ajaxify’ some ASP Panel controls (ActionContainer and ActionContainer1 in this example) by doing something like this:

RadAjaxManager1.AjaxSettings.AddAjaxSetting(ActionContainer, ActionContainer, null);

RadAjaxManager1.AjaxSettings.AddAjaxSetting(ActionContainer1, ActionContainer1, null);

The effect I am getting is something similar to the one I’d get by using RadAjaxPanel controls. This means that ActionContainers get updated when any control inside them generates one postback. In my simple example I have two panels and each contains one button, one label, and one lisbox. A new line is added to the corresponding list box each time a button is pressed. Besides that, the label inside each panel also is updated each time it is updated.

Once again, the effect is similar to what I would get with two RadAjaxPanels but with a very important difference: their requests can get queued and therefore won’t cancel each other.

        <asp:Panel runat="server" ID="ActionContainer" BorderWidth="5">

            <asp:ListBox ID="ListBox" runat="server" AutoPostBack="true">
            </asp:ListBox>
           
            <asp:Button ID="DoIt" runat="server" OnClick="DoIt_Click" />
            PostBack: <asp:Label ID="InnerPostBackTime" runat="server"></asp:Label>
        </asp:Panel>

        <asp:Panel runat="server" ID="ActionContainer1" BorderWidth="5">
            <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="true">
            </asp:ListBox>
           
            <asp:Button ID="DoIt1" runat="server" OnClick="DoIt1_Click" />
            PostBack: <asp:Label ID="InnerPostBackTime1" runat="server"></asp:Label>
        </asp:Panel>

This works fine with RadControls for ASP.NET Q1 2008 but doesn’t work with RadControls for ASP.NET Ajax Q1 2008. In the later case the labels for both panels get updated when either button is clicked.

I know that one solution for this could be adding settings for every control inside the panel - the ones that generate postbacks - but that’s something I’m trying to avoid.

The question is: is there any way to get the desired behaviour out of the Ajax RadControls?

Thanks,

Paulo

[Maria Ilieva]

Hi paulo.galão,

I tested this scenario and was able to replicate the described scenario. The problem seems to be in the fact that you have set the Label property "Text" in PageLoad. However the application works as expected if you add the Labels settings in the corresponding ButtonClick handlers and set different "text" property in PageLoad.
Test this approach and let us know if this helps

All the best,
Maria Ilieva
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[paulo.galão]

Hi Maria, thanks for your reply.

I agree with you - It would work ok If the labels were affected only in the click event. But that's just an illusion! Let's see if I can explain it better...

The way I see it, the problem is not in the fact that the text for labels is changed in page load. The problem is that only one of them should be rendered at each time - depending on the pressed button. This means that if the label didn't get rendered and sent to client the the moment in which text was changed wouldn't matter at all!

In fact that's exactly what I get with the non-ajax version - one postback generated by an element inside one panel doesn't update the elements in the other. In this scenario the moment in which the text for labels is changed becomes irrelevant. What I am trying to show with the example is exactly that - with the new AjaxManager and those AjaxSettings both panels get updated at the same time, it doesn't matter what button was pressed.

Put in another way: each button is inside its own panel. Because of that, the result should be the same as using two RadAjaxPanels - a postback generated in one wouldn't update the contens of the other, regardless of their place in the page life-cycle. That's exacly what happens if the ajax settings are set as follows:

RadAjaxManager1.AjaxSettings.AddAjaxSetting(DoIt, ActionContainer,

null);
RadAjaxManager1.AjaxSettings.AddAjaxSetting(DoIt1, ActionContainer1, null);

Instead of:

RadAjaxManager1.AjaxSettings.AddAjaxSetting(ActionContainer, ActionContainer,

null);
RadAjaxManager1.AjaxSettings.AddAjaxSetting(ActionContainer1, ActionContainer1, null);

See what I mean? 

The question is: is there a way to make the ajax version work as the non-ajax one, i.e. work properly with 'ajaxification' of the panels?
There is the obvious one, of course, which is to use the buttons as triggers instead of the panels. But this is one approach that I am trying to avoid. There are two reasons for that. First of all I don't know - and don't want to know - the internals of the user controls that I want to load into the panels. Besides that I could also 'dig' into the control tree them and add ajax settigns for each button, listbox, etc... This would work but it would cause your initiator dictionary to be a lot bigger than it needs to - nad I don't know the possible side effects that this might have.

Well I hope I explained it properly this time.

Thanks once again,
Paulo

[Maria Ilieva]

Hello Paulo,

I tested again this scenario and you are completely correct for the strange behaviour of the RadAjaxManger. It seems that there are some problems in the registration of the RdaAjaxManger settings in this specific scenario. However this behaviour could be avoid by setting the RadAjaxManager as ajax initiator instead of the Panels.
For example:

 <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel2" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
</telerik:RadAjaxManager>

In this way you will keep the required functionality and will remove the unnecessary additional update.


Greetings,
Maria Ilieva
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[paulo.galão]

Thanks Maria, that's it!