Empty div panel

[Jocelyn]

Hi,

I am using very complicated Ajax in my application. I only use RadAjaxManager and RadAjaxManagerProxy.

I have some asp:Panel that I put Ajax on it and inside it. When I look in the HTML code I get some empty div AjaxPanel (See attached image).

Why this is happening? This is happening when I have a ajaxfied asp:Panel with ascx inside it that has RadAjaxManagerProxy.

Thanks.

[Jocelyn]

Hi,

I noticed that's only happening when I have ajax control inside an axajfied asp:panel.

Example:

ASPX

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

<asp:Panel runat="server" ID="panelMain">
    <uc:MyControl runat="server" id="ucMyControl" />
</asp:Panel>

MyControl

<telerik:RadAjaxManagerProxy runat="server" ID="ramp1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btnTest">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="txtTest" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

    <telerik:RadButton runat="server" ID="btnTest" Text="test"></telerik:RadButton>

    <telerik:RadTextBox runat="server" ID="txtTest"></telerik:RadTextBox>
    <telerik:RadTextBox runat="server" ID="txtTest2"></telerik:RadTextBox>

MyControl.ascx.vb

Private Sub btnTest_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnTest.Click
    txtTest.Text = "hello"
    txtTest2.Text = "hello"
End Sub

In this example, the expected behavior is that only txtTest will show "hello", but in reality, both show "hello" on btnTest click.

What Am I doing wrong? I don't want to take off Ajax on the asp:panel.

Is it possible to do?

Thanks.

[msigman]

Hello,

Keep in mind that any control that is registered as an AJAX trigger, will also be updated by AJAX updates.  Also it is normal for divs to be wrapped around AJAXified elements, I believe this is a function of RadAjaxManager.

P.S. I think you forgot to attach your screenshot.

Thanks,
Matt

[Viktor Tachev]

Hi Jocelyn,

The settings you have for the RadAjaxManager would Ajax-ify the whole Panel and all controls inside it. If an Ajax request is initiated from the Panel all controls wrapped in it would be updated. This is why in your case both TextBox controls are updated. If you would like only the Button and one TextBox control to be Ajax-enabled you should remove the AjaxSettings for the RadAjaxManager. Then the markup would look like shown below:

<telerik:RadAjaxManager runat="server" ID="ram1">
</telerik:RadAjaxManager>

If you would like additional information on using RadAjaxManager with UserControl pages you may find this article interesting.

I hope this information is helpful to you.

Regards,

Victor Tachev

Telerik

[Jocelyn]

Hi,

thanks for your answers!

Yes I forgot to add the image. I just did.

Jocelyn

[Jocelyn]

Hi,

I did another test that should works, but it doesn't. I am using MasterPage

ASPX

<asp:Content ID="mainContent" ContentPlaceHolderID="phMain" runat="server">
    <telerik:RadAjaxManagerProxy runat="server" ID="ramp1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btn1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="panel2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="panel2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="panel2" />
                    <telerik:AjaxUpdatedControl ControlID="panelMain" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <telerik:RadButton runat="server" ID="btn1" Text="test">
    </telerik:RadButton>
    <telerik:RadTextBox runat="server" ID="RadTextBox1">
    </telerik:RadTextBox>
    <asp:Panel runat="server" ID="panelMain">
        <telerik:RadTextBox runat="server" ID="txtTest2">
        </telerik:RadTextBox>
    </asp:Panel>
    <asp:Panel runat="server" ID="panel2">
        <telerik:RadTextBox runat="server" ID="txtTest">
        </telerik:RadTextBox>
        <telerik:RadButton runat="server" ID="btnInsidePanel2" Text="InsidePanel2">
        </telerik:RadButton>
    </asp:Panel>
</asp:Content>

aspx.vb

Private Sub btnTest_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn1.Click, btnInsidePanel2.Click
    txtTest.Text = "test"
    txtTest2.Text = "Test2"
    RadTextBox1.Text = "RadTextBox1"
End Sub

In my MasterPage

<telerik:RadAjaxManager runat="server" ID="ramMain">
</telerik:RadAjaxManager>

In this example, any control inside panel2 should update controls in panelMain and panel2. So when I click on btnInsidePanel2, it should update txtTest and txtTest2.

In reality, this is what happens.

But, when I click on btn2, it should only update what is in the panel2. In this case: txtTest and btnInsidePanel2.

In realty, on clicking btn2, it updates txtTest AND txtTest2 that is inside panelMain. It should not update txtTest2.

Why is this happening? 

Thanks.

[msigman]

The reason is that if a container control is enrolled in AJAX, even as a trigger, its children also become recipients of future AJAX updates. There is a property you can set to disable this behavior called UpdateInitiatorPanelsOnly, but that is how it works out of the box.  It does not happen with controls that are explicitly enrolled.  If you remove the line

<telerik:AjaxSetting AjaxControlID="panel2">                 <UpdatedControls>                     <telerik:AjaxUpdatedControl ControlID="panel2" />                     <telerik:AjaxUpdatedControl ControlID="panelMain" />                 </UpdatedControls>             </telerik:AjaxSetting>

you should see that PanelMain is no longer updated when btn1 is clicked.

More information: http://www.telerik.com/help/aspnet-ajax/ajax-update-initiator-panels-only.html