Tool tip as modal popup

[gmoinaz]

I have taken your modality example and modified a little so that I could possibly use it as an edit pop up.  I included a RadDatePicker within the asp:UpdatePanel and by doing this the panel does not show.  If I remove the RadDatePicker then it does show.  Do you know what I am doing wrong?  I am including the aspx page below:

<%

@ Page Language="VB" AutoEventWireup="false" CodeFile="modalpopup.aspx.vb" Inherits="modalpopup" %>

 

<%

@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

 

<!

 

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 id="Head1">

 

 

</

 

head>

 

<

 

body class="BODY">

 

 

<form id="Form1" method="post" runat="server">

 

 

<asp:ScriptManager ID="ScriptManager1" runat="server">

 

 

</asp:ScriptManager>

 

 

<p>

 

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.

 

</p>

 

 

<telerik:RadToolTip ID="RadToolTip1" runat="server" Modal="true" ShowEvent="FromCode"

 

 

Position="Center" RelativeTo="BrowserWindow" OnClientBeforeHide="OnClientBeforeHide"

 

 

Width="130px">

 

 

<img src="./Images/loading.gif" width="130" height="60" alt="&nbsp;" /><br />

 

 

</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 />

 

 

<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();

}

}

);

 

function HideToolTip() {

 

 

var tooltip = GetActiveToolTip();

 

 

if (tooltip.get_id() == "RadToolTip2") {

 

toHide =

true;

 

tooltip.hide();

 

}

};

 

function ToggleFirstPopup() {

 

$find(

"<%= RadDatePicker1.ClientID %>").showPopup();

 

};

 

//]]>

 

 

</script>

 

 

<p>

 

The button below opens a registration form and "blocks" the page until the user

has submitted it.

 

</p>

 

 

<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" ManualClose="True">

 

 

<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: 200px">

 

Hours

<asp:RequiredFieldValidator ID="rfvHours" ControlToValidate="txtHours" Display="Dynamic" runat="server" ErrorMessage="[Required]"></asp:RequiredFieldValidator>

 

:

<br />

 

 

<asp:TextBox ID="txtHours" runat="server"></asp:TextBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td style="width: 200px">

 

Target Date:

<asp:RequiredFieldValidator ID="rfvTargetDate"

 

 

ControlToValidate="RadDatePicker1" Display="Dynamic" runat="server"

 

 

ErrorMessage="[Required]"></asp:RequiredFieldValidator>

 

 

<br />

 

 

<telerik:RadDatePicker ID="RadDatePicker1" runat="server"

 

 

Culture="English (United States)" Skin="Vista" Style="vertical-align: middle;"

 

 

Width="200px">

 

 

<Calendar Skin="Vista" UseColumnHeadersAsSelectors="False"

 

 

UseRowHeadersAsSelectors="False" ViewSelectorText="x">

 

 

</Calendar>

 

 

<DatePopupButton HoverImageUrl="" ImageUrl="" Visible="false" />

 

 

<DateInput ID="DateInput1" runat="server" DateFormat="D"

 

 

onclick="ToggleFirstPopup()">

 

 

</DateInput>

 

 

</telerik:RadDatePicker>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td style="width: 200px">

 

Priority:

<br />

 

 

<telerik:RadComboBox ID="RadComboBox1" runat="server" AllowCustomText="True"

 

 

EmptyMessage="Select a priority...">

 

 

<Items>

 

 

<telerik:RadComboBoxItem runat="server" Text="1" Value="1" />

 

 

<telerik:RadComboBoxItem runat="server" Text="2" Value="2" />

 

 

<telerik:RadComboBoxItem runat="server" Text="3" Value="3" />

 

 

</Items>

 

 

</telerik:RadComboBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td style="width: 200px">

 

Tech:

<br />

 

 

<telerik:RadComboBox ID="RadComboBox2" runat="server" AllowCustomText="true" EmptyMessage="Select a techie..."></telerik:RadComboBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td style="width: 100px">

 

 

<asp:Button ID="btnLogIn" runat="server" Text="Log in" OnClick="btnLogIn_Click" />&nbsp;<button id="btnCancel" onclick="HideToolTip()">Cancel</button></td>

 

 

</tr>

 

 

<tr>

 

 

<td style="width: 100px">

 

 

<asp:Label ID="lblError" Width="150px" runat="server" Visible="false" ForeColor="red"></asp:Label>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

<telerik:RadInputManager ID="RadInputManager1" runat="server">

 

 

<telerik:NumericTextBoxSetting BehaviorID="NumercBehavior2" EmptyMessage="type.." Type="Number">

 

 

<TargetControls>

 

 

<telerik:TargetInput ControlID="txtHours" />

 

 

</TargetControls>

 

 

</telerik:NumericTextBoxSetting>

 

 

</telerik:RadInputManager>

 

 

</asp:Panel>

 

 

</ContentTemplate>

 

 

<Triggers>

 

 

<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />

 

 

</Triggers>

 

 

</asp:UpdatePanel>

 

 

</telerik:RadToolTip>

 

 

 

<br />

 

 

</form>

 

</

 

body>

 

</

 

html>

 

[gmoinaz]

I just want to add that I still cannot get a RadDatePicker to work inside the UpdatePanel of a RadToolTip and I also cannot get a RadComboBox to function.  I can load the data to the combobox but when I click to select a value it seems to dropdown behind the UpdatePanel in the area of the web page that has been disabled/grey.

[Svetlina Anati]

Hello gmoinaz,

As far as I understand form your explanations the problems you experience are that the dropdowns of the RadComboBox an dteh RadDatePicker show behind the tooltip. If so, you are correct and the described behavior comes from the fact that the z-index of the tooltip is bigger than the one of the combobox (resp. RadDatePicker). However, you can achieve the desired behavior by setting a bigger z-index to the RadComboBox by using its style attribute as shown below:

        <asp:HyperLink ID="HyperLink1" runat="server">Mouse over to show tooltip</asp:HyperLink> 
        <telerik:RadToolTip ID="RadToolTip1" OnClientHide=HideDropDownFunction runat="server" TargetControlID=HyperLink1 Sticky=true > 
            <telerik:RadComboBox ID="RadComboBox1" runat="server" style="z-index:8001">  
                <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" /> 
                </Items> 
                <CollapseAnimation Duration="200" Type="OutQuint" /> 
            </telerik:RadComboBox> 
        </telerik:RadToolTip> 

You can find more information about controlling visual appearance of absolute positioned RadControls in the following location:

http://www.telerik.com/help/aspnet-ajax/controlling-absolute-positioning-with-zindex.html

I also assume that you would like to hide the dropdown list of the RadComboBox when the RadToolTip hides - in order to do this you can use javascript as shown below:

    <script type="text/javascript">  
        function HideDropDownFunction()  
        {  
         var combo = $find("<%= RadComboBox1.ClientID %>");  
         if(combo && combo.get_dropDownElement().style.display != "none")  
         {  
           combo.hideDropDown();  
         }  
        }   
        </script> 

As to the RadDatePicker - the above is also relevant to it and all you should do is to implement teh same logic for it as well.


All the best,

Svetlina
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.

[gmoinaz]

Svetlina - thanks for the reply.  I have the combobox working however the popup calendar still loads behind the update panel.  This is how I'm positioning with z-index:

 

<tr>

 

 

<td style="width: 200px">

 

Target Date:

<br />

 

 

<telerik:RadDatePicker ID="RadDatePicker1" runat="server"

 

 

Style="vertical-align: middle;z-index: 5000;" Width="200px"

 

 

Culture="English (United States)" Skin="Vista">

 

 

<Calendar ID="Calendar1" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"

 

 

ViewSelectorText="x" Skin="Vista" runat="server">

 

 

</Calendar>

 

 

<DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton><DateInput ID="DateInput1" runat="server" onclick="ToggleFirstPopup()" DateFormat="D"></DateInput>

 

 

</telerik:RadDatePicker>

 

 

</td>

 

 

</tr>

 

[Svetlina Anati]

Hi gmoinaz,

I already answered your support thread and for your convenience and for other who might encounter the same problem I pasted my reply below and also attached teh sample demo here as well.


Indeed, the CSS setting you have found will do the trick. I could not understand whetehr it worked on your side or not, but when I tested it on my side, I had to add the keyword !important in order to give a higher priority to it and override the deafult z-index.

On a side note, if you open the tooltip, show teh calendar popup and then close the tooltip without closing the popup, it will stay on the screen. This can be easily solved in the manner I suggested for the combo box - in this particular case the code should be the following one:

  <script type="text/javascript">

        function BeforeHide()
            {
              var datePicker = $find("<%=RadDatePicker1.ClientID %>");
              datePicker.hidePopup();
            }

        </script>

where BeforeHide is the handler for the OnClientBeforeHide event of the tooltip.

I hope that my reply is helpful and for your convenience I prepared and attached a sampel demo for you. Let me know how it goes.




Regards,
Svetlina
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.

[Jason Zam]

Hello Svetlina,

Even after following your suggestion for displaying the RadDatePicker above the ToolTip, I am still having no success.  Can you please assist me, thanks!

<telerik:RadToolTip ID="RadToolTip2" TargetControlID="imgAssignQuiz" OnClientBeforeHide="BeforeHideTT2" RelativeTo="Element" Position="BottomRight" RenderInPageRoot="True" Modal="True" ShowEvent="OnClick" HideEvent="ManualClose" Skin="Outlook" Height="250px" Width="350px" runat="server">
                <table width="100%" border="0" cellpadding="8" cellspacing="0">
                    <tr>
                        <td style="width:1%; white-space:nowrap;">
                            Project:&nbsp;
                        </td>
                        <td style="width:99%; white-space:nowrap;">
                            <telerik:RadComboBox ID="radcboProjects" EnableScreenBoundaryDetection="True" CssClass="PanelContainerControl" EmptyMessage="Select Project" Skin="Vista" Width="190px" MaxHeight="100px" ToolTip="" ValidationGroup="SelectQuiz" MarkFirstMatch="False" runat="server" style="z-index:10000"></telerik:RadComboBox>&nbsp;
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="radcboProjects" ErrorMessage="Select Project" Text="*" ValidationGroup="SelectQuiz" runat="server"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:1%; white-space:nowrap;">
                            Quiz:&nbsp;
                        </td>
                        <td style="width:99%; white-space:nowrap;">
                            <telerik:RadComboBox ID="radcboQuizzes" EnableScreenBoundaryDetection="True" CssClass="PanelContainerControl" EmptyMessage="Select Quiz" Skin="Vista" Width="190px" MaxHeight="100px" ToolTip="" ValidationGroup="SelectQuiz" MarkFirstMatch="False" runat="server" style="z-index:10001"></telerik:RadComboBox>&nbsp;
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="radcboQuizzes" ErrorMessage="Select Quiz" Text="*" ValidationGroup="SelectQuiz" runat="server"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:1%; white-space:nowrap;">
                            Due Date:&nbsp;
                        </td>
                        <td style="width:99%; white-space:nowrap;">
                            <telerik:RadDatePicker ID="raddateDueDate" DateInput-EmptyMessage="Enter Due Date" Skin="Vista" Width="179px" ToolTip="" ValidationGroup="SelectQuiz" runat="server" style="z-index: 100000 !important;"></telerik:RadDatePicker>&nbsp;
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" ControlToValidate="raddateDueDate" ErrorMessage="Enter Due Date" Text="*" ValidationGroup="SelectQuiz" runat="server"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:1%; white-space:nowrap;">
                            Required:&nbsp;
                        </td>
                        <td style="width:99%; white-space:nowrap;">
                            <asp:CheckBox ID="chkRequired" runat="server" />
                        </td>
                    </tr>
                    <tr style="vertical-align:top;">
                        <td style="width:1%; white-space:nowrap;">
                            &nbsp;
                        </td>
                        <td style="width:99%; white-space:nowrap;">
                            <asp:Button ID="btnAssignQuiz" Text="Assign Quiz" ValidationGroup="SelectQuiz" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <asp:ValidationSummary ID="ValidationSummary2" HeaderText="<img src='images/Warning.png' style='vertical-align: middle;' alt='' border='0'>&nbsp;&nbsp;* Please address the following:" DisplayMode="BulletList" EnableClientScript="true" ValidationGroup="SelectQuiz" runat="server"/>
                        </td>
                    </tr>
                </table>
            </telerik:RadToolTip>

[Svetlina Anati]

Hi Jason,

I assume that you have missed the fact that aside from the code, there is also a CSS class which should be applied - it is the following one:

  <style type="text/css">

    .RadCalendarPopup
    {
       z-index: 10000!important;
    }

    </style>

For your convenience I modified your page and attached it to the thread.


Sincerely yours,
Svetlina
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.

[Jason Zam]

Svetlina,

That did the trick, thanks so much!!!

Jason