Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

ToolTip / Modality

When you click the button below, a modal RadToolTip will show, that will "block" the page while you perform some operation (e.g. AJAX Request) and the page is unavailable for the user until the operation ends up.



The button below opens a registration form and "blocks" the page until the user has submitted it.



  • Modality


    There are scenarios in which it is very useful to use a modal RadToolTip because of the modal functionality specifics.

    This example demonstrates two of the most common scenarios - the following ones:

    1. You want to "block" the page while performing some operation (e.g. AJAX Request) and it is unavailable for the user until the operation ends up.
    2. You want to show for example a registration form and to allow the user to proceed only if he has submitted it.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.Modality.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server" />
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" ShowSkinChooser="false" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //<![CDATA[
            var toHide = false;

            function OnClientBeforeHide(sender, args)
            {
                if (!toHide) args.set_cancel(true);
            }
            //Attach to event that will indicate when ajax request is complete
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest
        (
         function (sender, args)
         {
         toHide = false;
         if (args.get_postBackElement().id == "Button1")
         {
         var tooltip = $find("<%=RadToolTip1.ClientID%>");
         tooltip.show();
         }
         else if (args.get_postBackElement().id == "Button2")
         {
         var tooltip = $find("<%=RadToolTip2.ClientID%>");
         tooltip.show();
         }
         }
        );
            function GetActiveToolTip()
            {
                var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
                return tooltip;
            }
            //Attach to event that will indicate when ajax request is complete
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest
        (
         function (sender, args)
         {
         var tooltip = GetActiveToolTip();
         if (tooltip != null && tooltip.get_id() == "RadToolTip1")
         {
         toHide = true;
         tooltip.hide();
         }
         }
        );        
        //]]>
        </script>
        <div class="bigModule" style="margin-bottom: 40px">
            <div class="bigModuleBottom">
                When you click the button below, a modal RadToolTip will show, that will "block"
                the page while you perform some operation (e.g. AJAX Request) and the page is unavailable
                for the user until the operation ends up.
            </div>
        </div>
        <telerik:RadToolTip ID="RadToolTip1" runat="server" Modal="true" ShowEvent="FromCode"
            Position="Center" RelativeTo="BrowserWindow" OnClientBeforeHide="OnClientBeforeHide"
            Width="140px" EnableShadow="true" HideEvent=FromCode>
            <img src='Images/loading.gif' alt="loading" style="margin-left: 35px;" />
        </telerik:RadToolTip>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
    <asp:Button ID="Button1" runat="server" Text="Simulate long AJAX request" OnClick="Button1_Click"
    CssClass="button" Style="display: block; float: left;" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <br />
        <br />
        <div class="bigModule" style="margin-bottom: 40px">
            <div class="bigModuleBottom">
                The button below opens a registration form and "blocks" the page until the user
                has submitted it.
            </div>
        </div>
        <p>
            <asp:Button ID="Button2" runat="server" Text="Show Login Form" CssClass="button" />
        </p>
        <telerik:RadToolTip ID="RadToolTip2" runat="server" Modal="true" ShowEvent="FromCode"
            Position="Center" RelativeTo="BrowserWindow" OnClientBeforeHide="OnClientBeforeHide"
            EnableShadow="true" HideEvent="FromCode">
            <asp:UpdatePanel runat="server" ID="UpdatePanel2">
                <ContentTemplate>
                    <asp:Panel ID="pInquiry" runat="server" Style="padding-left: 11px;">
                        Log in:<br />
                        <br />
                        <table>
                            <tr>
                                <td style="width: 100px">
                                    UserName:
                                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 100px">
                                    Password:
                                    <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 100px">
                                    <asp:Button ID="btnLogIn" runat="server" Text="Log in" OnClick="btnLogIn_Click" CssClass="button" />
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 100px">
    <asp:Label ID="lblError" Width="150px" runat="server" Visible="false" ForeColor="red"
    Text="Please enter username and password."></asp:Label>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
        </telerik:RadToolTip>
        <br />
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451