New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.Modality.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script src="scripts.js" type="text/javascript"></script>
    <div class="demo-container size-thin">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="server" Text="Simulate long AJAX request" OnClick="Button1_Click" />
                <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" Modal="true" ShowEvent="FromCode"
                                    Position="Center" RelativeTo="Element" TargetControlID="Button1" OnClientBeforeHide="telerikDemo.onClientBeforeHide"
                                    Width="140px" HideEvent="FromCode">
                    <img src='Images/loading.gif' alt="loading" style="margin-left: 35px;" />
                </telerik:RadToolTip>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <telerik:RadButton RenderMode="Lightweight" ID="Button2" runat="server" Text="Show Login Form" />
    </div>
    <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip2" runat="server" Modal="true" ShowEvent="FromCode"
                        Position="BottomCenter" RelativeTo="Element" TargetControlID="Button2" HideEvent="FromCode">
        <asp:UpdatePanel runat="server" ID="UpdatePanel2" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Panel ID="pInquiry" runat="server" Style="padding-left: 11px;">
                    Log in:<br />
                    <br />
                    <table>
                        <tr>
                            <td style="width: 100px">
                                UserName:
                                <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox1" runat="server"></telerik:RadTextBox>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 100px">
                                Password:
                                <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox2" runat="server" TextMode="Password"></telerik:RadTextBox>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 100px">
                                <telerik:RadButton RenderMode="Lightweight" ID="btnLogIn" runat="server" Text="Log in" OnClick="btnLogIn_Click"></telerik:RadButton>
                            </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"></asp:AsyncPostBackTrigger>
            </Triggers>
        </asp:UpdatePanel>
    </telerik:RadToolTip>
    <script type="text/javascript">
        //<![CDATA[
        telerikDemo.tooltip1ID = "<%=RadToolTip1.ClientID%>";
        telerikDemo.tooltip2ID = "<%=RadToolTip2.ClientID%>";
        //]]>
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance