Rad Ajax Manager, Rad Ajax Manager Proxy and User Control. Ajaxification occurs alternatively

[Avi]

Hi,

I have a page with a user control and rad ajax manager proxy as shown in the code.

The rad ajax manager is configured to update the whole panel.

  <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div>
            <asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%">
                <uc1:WebUserControl ID="WebUserControl1" runat="server"/>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </asp:Panel>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="100%"
                Width="100%">
                <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                    style="border: 0px;" />
            </telerik:RadAjaxLoadingPanel>
        </div>
    </form>

 
my user control is like

<div>
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadComboBox2" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <div>
        <table>
            <tr>
                <td>
                    <telerik:RadComboBox ID="RadComboBox1" runat="server">
                        <ItemTemplate>
                            <asp:CheckBox ID="chkbxSalesRep" runat="server" EnableViewState="true" Text="abc" />
                        </ItemTemplate>
                        <CollapseAnimation Duration="200" Type="OutQuint" />
                        <FooterTemplate>
                            <table>
                                <tr>
                                    <td>
                                        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /></td>
                                </tr>
                            </table>
                        </FooterTemplate>
                    </telerik:RadComboBox>
                </td>
                <td>
                    <telerik:RadComboBox ID="RadComboBox2" runat="server">
                        <ItemTemplate>
                            <asp:CheckBox ID="chkbxSalesRep" runat="server" EnableViewState="true" Text="abc" />
                        </ItemTemplate>
                        <CollapseAnimation Duration="200" Type="OutQuint" />

                        <Items>
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" Value="RadComboBoxItem1" />
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" Value="RadComboBoxItem2" />
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" Value="RadComboBoxItem3" />
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4" Value="RadComboBoxItem4" />
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem5" Value="RadComboBoxItem5" />
                            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem6" Value="RadComboBoxItem6" />
                        </Items>
                    </telerik:RadComboBox>
                </td>
            </tr>
            <tr>
            <td colspan="2"><asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" /></td>
            </tr>
        </table>
    </div>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="100%"
        Width="100%">
        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
            style="border: 0px;" />
    </telerik:RadAjaxLoadingPanel>
</div>

User control consists of two combo boxes: one with a button in the footer. On the click of button in the footer i wish to update the second combo box.

It also has a button.  On the button click i wish to update the whole asp panel of the content page. so i have created a event which updates the whole desired controls. All this works fine.

But when button in the footer of the combo box is clicked the page postbacks alternatively. ie On first click partial post back(ajaxified) and on the other click full post back (no ajaxification).  this continues to happen alternately.

Please let me know how should i attain this, or where have i made the mistake.

I also copied the cs code here (though it  contains no logic), if it can help you.

//     web user control

public partial class WebUserControl : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
    }
}


// the page

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

}

[Tsvetoslav]

Hi Avi,

Try ajaxifying the button itself.

I hope this helps.

All the best,
Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Avi]

Hi,

Can you elaborate this?
And can you explain why does this happen.
Can this be avoided.  If yes, how.

[Tsvetoslav]

Hello Avi,


When you add an ajax setting to the RadAjaxManager control it creates an update panel around the control that issues the ajax request and the one to be updated upon the request having completed. In addition, a RadComboBox is composed of two parts: the first one consists of a box and a down arrow button - the only ones that you see when the combo has not been expanded; the second part consists of a drawer (rendered as a div on the client) - it contains the combo items and the footer template (in your case with a button in it). The behavior you are experiencing is due to the fact that RadComboBox is rendered in a such a way that its second part (the drawer) remains outside the update panel upon the first ajax request and is not able to make an ajax request afterwards. Therefore, you need to ajaxify the button itself so that it will always be included in the update panel.

In addition, excuse me for having missed to point another issue - you need to add the ajax setting for the button on the combo's pre-render event, otherwise the loading panel won't be displayed properly. This is needed since RadAjaxManager is the one that controls the displaying of the loading panel and if the ajax setting for the button in the combo footer is added earlier than the combo's pre-render event, the ajax manager won't be able to track what control is making the ajax request and display the loading panel correctly. This is needed only in the specific scenario you are trying to implement on account of the above-mentioned reason.

Please, take a look at the small sample attached to this post.

I hope this information helps.

Best regards,
Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Avi]

Hi, Tsvetoslav

Your sample code worked fine.

Thanks & Regards
Avi