Tooltip with ajaxified button inside

[Kin]

Hi Telerik Team, Hi All,

I have a problem with ajaxifying RadTooltTip.

My case is (drafts):

<RadAjaxPanel>

     <RadTooltip>

            <Button>

 

I want to make Button ajaxified. So clicking on in will not do postback, but do ajax request.

How can I do it? Please answer ASAP, It's very important to me.

[Kin]

More scenario info.

I use RadTooltip as a modal window to show confirmation message with "Submit" and "Cancel" buttons.

It is displayed in some submitButton_Click event by calling RadTooltip.Show() server side method.

I want to ajaxify buttons "Submit" and "Cancel" inside tooltip. 

 

[Kin]

Please help to implement modal confirmation window with async buttons based on Telerik UI for Web Forms.

Thanks.

[Kin]

I realized one thing. Seems it is Telerik bug. Because in previous version it works fine.

After update I can't make it work. In previous version popup HTML elements was rendered in place, but in new version it renders in the end of the page. May be it is the reason.

[Danail Vasilev]

Hi Kin,

If you want to ajaxify the tooltip's content you should wrap its content inside the ajaxpanel. For example:

ASPX:

<telerik:RadButton ID="RadButton2" runat="server" Text="Show ToolTip" OnClick="RadButton2_Click" />

<telerik:RadToolTip ID="RadToolTip1" runat="server">
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
        <telerik:RadButton ID="RadButton1" runat="server" Text="click" OnClick="RadButton1_Click" />
        <asp:TextBox ID="Textbox1" runat="server" />
    </telerik:RadAjaxPanel>
</telerik:RadToolTip>

C#:

protected void RadButton2_Click(object sender, EventArgs e)
{
    RadToolTip1.Show();
}
protected void RadButton1_Click(object sender, EventArgs e)
{
    Textbox1.Text = DateTime.Now.ToString();
}

The above example works properly on my side with latest Telerik UI version.

As for the confirmation dialogs you can find useful this demo - http://demos.telerik.com/aspnet-ajax/button/examples/confirm/defaultcs.aspx

Regards,
Danail Vasilev
Telerik

[Kin]

Thank you for answer, Danail,
I'll try it today and reply.

Can I use RadAjaxManager1.AjaxSettings.AddAjaxSettings() method from C# to specify event and target in this case?

I widely use it across application. I've read somewhere (maybe in official doc) that using program AddAjaxSettings and markup RadAjaxPanel is not recommended together on same page.

[Danail Vasilev]

Hi Kin,

It is fine to use the RadAjaxManager too.  Note, however, that using RadAjaxPanel simultaneously with RadAjaxManager or UpdatePanel ( or implementing multiple wrapped RadAjaxPanels ) is not a supported scenario and we highly recommend to avoid such implementation. Please either use just the manager to update your controls replacing the UpdatePanel / RadAjaxPanel with a regular asp:Panel, or use the UpdatePanel / RadAjaxPanel alone to wrap your page.

Regards,
Danail Vasilev
Telerik

[Kin]

Hi Danail, your example works fine, thanks.

But I need full ajaxified page. RadButton2 in your example must be ajaxified too.
If I do so by ajaxifying RadButton2 with RadAjaxManager.AjaxSettings.AddAjaxSettings(RadButton2, RadToolTip1), then
Tooltip behavior looks strange - it is balnk inside and disappers in few seconds after display. Second click on RadButton2 fires an js exception.

Please, help.

[Marin Bratanov]

Hello Kin,

Let me take a step back and address the original query about a confirmation dialog. I advise that you review the following article about RadWindow that can help you with your implementation: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/how-to/using-radconfirm-in-server-code. It shows several ways to implement a modal confirmation box. The last one can be easily AJAX-enabled by following this article (which, by the way, also applies for RadToolTips): http://docs.telerik.com/devtools/aspnet-ajax/controls/window/how-to/how-to-use-radwindow-with-ajax.

As for a change in the toolitp behavior - as of Q1 2015. it renders in the page root by default, and not in place, but you can revert this behavior through the RenderInPageRoot property.

If you want to keep using a tooltip for this, however, I advise using the same approach for the AJAX settings as with the RadWindow - i.e., do not include the entire tooltip in the response, just its contents. If you need to show it from the server, register a script, just like for RadWindow: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/opening-from-the-server.

Regards,

Marin Bratanov
Telerik

[Kin]

Thanks, Marin!