Problem Ajaxifying Labels

[Geoff Van Brunt]

I have a couple of labels on the page that I need to update periodically via Ajax. When RadAjaxManager is used to included them in an Ajax call, they are wrapped in a div. Once this happens the layout of the page is broken as they were originally spans. <edit>I'm guessing this has to do with them being wrapped with UpdatePanels, but how do I work around this?</edit> I guess I can wrap them in a panel to fix this. (slaps forhead).

Not only that, if they are configured to be updated by multiple controls, they will be wrapped by more than one div with the same id. Is this the correct behaviour?

[surfer]

This is indeed related to UpdatePanel - it renders div tags which are typically block elements and place their child contents in a new row. This may screw up design in certain situations. That is why there is a RenderMode property in asp:UpdatePanel, e.g.

            <asp:UpdatePanel runat="server" ID="UpdatePanel1" RenderMode="Inline">
                <ContentTemplate>
                    <asp:Button runat="server" ID="Button1" Text="CallBack" />
                </ContentTemplate>
            </asp:UpdatePanel>

RenderMode Inline resolves the problem. I am not sure how this very same approach is possible with RadAjaxManager - I see no RenderMode property for RadAjaxManager / Panel... maybe there is a need for such a property that will propagate to all UpdatePanels RadAjaxManager creates? Or there is another way?

[surfer]

Just a quick example of the scenario above - the following declaration

<asp:UpdatePanel runat="server" ID="UpdatePanel1" RenderMode="Inline">
    <ContentTemplate>
    <asp:Button runat="server" ID="Button1" Text="CallBack" />
    </ContentTemplate>
</asp:UpdatePanel>

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

<asp:Button runat="server" ID="Button2" Text="CallBack" />

Renders the following markup:

<span id="UpdatePanel1">
    <input type="submit" name="Button1" value="CallBack" id="Button1" />
</span>

<div id="RadAjaxManager1SU">
    <span id="RadAjaxManager1" style="display:none;"></span>
</div>

<div id="Button2Panel">
    <input type="button" name="Button2" value="CallBack" onclick="javascript:__doPostBack('Button2','')" id="Button2" />
</div>

In the built-in UpdatePanel ajaxification, the button is wrapped inside a <span> which preserves the layout (because of the RenderMode = "Inline" setting).

With RadAjaxManager, this becomes <div> (per the default RenderMode = "Block") and since this is a block element, it can screw up design.

[Geoff Van Brunt]

Ah, now I seem to remember this. I played around with Atlas "way back when" the first Alpha came out. It seemed like every release broke my projects (at least with Infragistics controls) so I switched to Telerik both because of WAY better support and their RadAjax. Now I forget almost everything to do with ASP.Net Ajax... :)

At any rate, perhaps a better question is why doesn't RadAjaxManager default to displaying them all as inline elements? I mean you want to "drop it in" and not affect the flow of the controls just like the older "non-Promethus" version. Or is their some reason why div's are preferred to spans? Perhaps what is needed is a global setting on RadAjaxManager to render them as inline or as block elements. For that matter, they could also drop in the same setting for the "updated controls" then you could turn it off or on per control.

What do you think?

Also getting back to my original post, I also think there is a bug as it wraps controls that are the "target" of more than one Ajax update in multiple divs with the same name... That isn't right is it?

[surfer]

I would also prefer <span>'s since this will interfere less with page layout, however the problem is that Microsoft chose <div> block element as default for reasons I am not aware of (but maybe they have a good reason after all). It will be a bit awkward if RadAjaxManager's default setting differs from the default settings of UpdatePanel... A RenderMode enum for RadAjaxManager with default setting the same as the default for UpdatePanel seems like a good idea.

The second issue... I really have no idea. Maybe the extra div's are needed for something, can't really tell what for at this point...

[Christopher Blickley]

Has there been any more discussion of this issue?  When I ajaxify controls like labels, they always seem to get a blank line rendered before them after an ajax postback using RadAjaxManager.  I wonder if this is related to this at all. 

-Chris

[Christopher Blickley]

Hello,

Actually, now that I think about, this scenario may be related too.  I have two RadComboBoxes side by side on a page like this, with text in front of each one, then a panel with lots of data that is loaded depending of what is selected int he comboboxes:

Type:  <RadComboBox1>    Term:  <RadComboBox2>
<asp:Panel>

I am using RadAjax to update the second combobox and the panel when the first combobox is changed.  This works fine, however, when I secify that RadComboBox should updated by an ajax call, it suddenly jumps down to the next line like this:

Type:  <RadComboBox1>    Term: 
<RadComboBox2>
<asp:Panel>

If I don't define RadComboBox2 as control to be udpated in RadAjaxManger, everything is fine.

As a way around this, I wrapped everything above in a <asp:panel> and then just update everything instead.  This works fine and it makes me think is related to the <div> vs <span> issue talked about in this thread.  I didn't have a chance to check the output yet, but this change occured when I moved from the old RadAjax to the Promethius version, so maybe this explains it.

It is not a big deal to me right now since I found a way around it, but there may be scenarios where this may not work out as well.  It would also be much better to just update the RadComboBox instead of having to update more than necessary by wrapping it in a <asp:Panel>

Is there any way around this right now?

-Chris

[Steve]

Hi Christopher,

We are already considering a RenderMode property for the AjaxManager with default value Block as MS AJAX. For the time being you can change the Render when using AjaxManager by hooking up to the AjaxSettingCreating like this:

 protected void RadAjaxManager1_AjaxSettingCreating(object sender, Telerik.Web.UI.RadAjaxControl.AjaxSettingCreatingEventArgs e)
    {
        e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline;
    }

Hope this helps.

Kind regards,
Steve
the Telerik team

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

[Grisha]

Thanks for solution, Steve. Was battling with this thing all day.

[E]

I have the same problem, I tried your suggestion but still persists the problem. My panel is in a master page, do I have to do something different? 

<telerik:RadAjaxManager ID="AjaxManagerProxy" runat="server" UpdatePanelRenderMode="Inline">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="NIT_NOG">// this is a radtextbox
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="PanelProveedor" UpdatePanelRenderMode="Inline"/>//this is an asp:panel
                        </UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>

[Maria Ilieva]

Hello,

You should set the "UpdatePanelsRenderMode" property in the main RadAjaxManager no matter if it is on the Master or in the Content Page. Do let us know if you are facing any issue in setting this property and if further assistance is needed.

Regards,
Maria Ilieva
Telerik