RadToolTipManager OnAjaxUpdate not firing after RadAjaxManager OnAjaxRequest

[Robert Helm]

EDIT: I just realize The title is misleading. The OnAjaxUpdate DOES fire, but I get the error: 'Sys.ArgumentNullException: Sys.ArgumentNullException: Value cannot be null.Parameter name: panelsUpdated[0]'.


I have a RadGrid inside a panel and I Ajaxify the panel as an AjaxSetting using an RadAjaxManager. A popup window let's the user add items to the grid on closing via javascript, which then calls the RadAjaxManager's AjaxRequest. This all works great.

I have a couple RadToolTipManager's that are wired to elements in the RadGrid. On page load or reload, the tooltips work great. However, if the user adds an item via the popup window which calls the RadAjaxManager's AjaxRequest, the tootips don't work (unless the page is refreshed which defeats the purpose). All the user gets is the native tooltip text and nothing else.

So, after reading the forums, I realized I needed to add each RadTooltipManager as AjaxSettings in the RadAjaxManager. I did that and the tooltip begins to fire now, but after a few seconds it tosses an error: 'Sys.ArgumentNullException: Sys.ArgumentNullException: Value cannot be null.Parameter name: panelsUpdated[0]'.

Here's the HTML side of things...

<telerik:RadCodeBlock>
    <script type="text/javascript">
        function OnClientClose(oWnd, args) {
            var arg = args.get_argument();
            if (arg) {
                var retValue = arg.ReturnValue;

                if (arg.ReturnValue == "ONE" || arg.ReturnValue == "TWO") {
                    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                    ajaxManager.set_enableAJAX(true);
                    ///this calls RadAjaxManager1_AjaxRequest() server side
                    ajaxManager.ajaxRequest(arg.ReturnValue);
                }
                else {
                    __doPostBack('__Page', 'REFRESH|' + retValue)
                }
            }
        }
    </script>
</telerik:RadCodeBlock>

<des:PageManager ID="PageManager1" runat="server" AJAXFramework="TelerikRadAJAX"
    AJAXControlID="ScriptManager1">
    <ChangeMonitor Enabled="True" UseValidationGroups="True" />
</des:PageManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="pnlONE">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlONE" LoadingPanelID="AjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="pnlTWO">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlTWO" LoadingPanelID="AjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                <telerik:AjaxUpdatedControl ControlID="RadToolTipManager3" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Transparency="55"
    BackColor="#E0E0E0">
    <div style="text-align: center">
        <asp:Image ID="imgPanelImage" runat="server" AlternateText="Loading..." ImageUrl="~/Images/ajax-loader.gif" />
    </div>
</telerik:RadAjaxLoadingPanel>

And the C# side....

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    RadToolTipManager1.TargetControls.Clear();
    RadToolTipManager3.TargetControls.Clear();

    //this is called from ajaxRequest() client side
    if (e.Argument == "ONE")
        grdONE.DataBind();
    else if (e.Argument == "TWO")
        grdTWO.DataBind();
}

protected void grdTWO_ItemDataBound(object sender, GridItemEventArgs e)
{
    ...
    this.RadToolTipManager1.TargetControls.Add(...)
    this.RadToolTipManager3.TargetControls.Add(...)
    ...
}

protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
{

    this.UpdateToolTip(args.Value, args.UpdatePanel);
}
private void UpdateToolTip(string elementID, UpdatePanel panel)
{
    ...
}

Any ideas?

Thanks for any help,
Robert 

[Marin Bratanov]

Hi Robert,

Since you initiate an AJAX request through the client-side api of the manager the AJAX settings need the manager as an initiator, e.g.:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="grdONE" LoadingPanelID="AjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="grdTWO" LoadingPanelID="AjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                <telerik:AjaxUpdatedControl ControlID="RadToolTipManager3" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

You may also want to clear the target control only for the grid you will be rebinding (i.e. in the if() statement).

If this does not help you can wrap each grid with its respective tooltip manager in a regular asp update panel with update mode set to conditional and also add an invisible asp button in each of them (i.e. Style="display:none") and do the logic in its server-side Click handler. You can initiate the ajax request for the button with the following JavaScript

__doPostBack("<%=HiddenButton1.UniqueID %>", "");

Greetings,
Marin Bratanov
the Telerik team

[Robert Helm]

Thanks for the reply Marin Bratanov. The code block below (setting the Ajax Manager as the initator) worked.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grdONE" LoadingPanelID="AjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="grdTWO" LoadingPanelID="AjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />

<telerik:AjaxUpdatedControl ControlID="RadToolTipManager3" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>