This is a migrated thread and some comments may be shown as answers.

why my menu dropdown hides behind the header of the scheduler

1 Answer 72 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Allen
Top achievements
Rank 1
Allen asked on 11 Jul 2012, 04:12 PM
Please refer to the attached file.
My submaster page:

<%@ Master Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="AvailabilityLinksSubMaster.master.vb" Inherits="MSP.AvailabilityLinksSubMaster" %>
<%@ MasterType virtualpath="~/Site.master" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
    .Visible
    {
        visibility: visible
    }
    .Invisible
    {
        visibility: hidden
    }
</style>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
    </asp:Content>

   
<asp:Content ID="Content2" ContentPlaceHolderID="TabContent" runat="server">
   
    <table style="height: 100%; width: 100%; min-height: 420px; margin-top: 0px;">
        <tr>
            <td>
    <div style="position: relative"> 
<ul id="nav">
 <li class="top"><a href="MyAvailability.aspx" class="top_link"><span>Home</span></a></li>
 <li class="top"><a href="#nogo2" id="Availability_Selections" class="top_link"><span class="down">Availability Selections</span></a>
  <ul class="sub">
   <li><a href="MyAvailability.aspx">Availability</a></li>
   <li><a href="Sched_AssocSS_Availability_edit.aspx"> -Edit</a></li>
   <li><a href="Sched_AssocSS_Availability_Extend.aspx">Open Availability</a></li>
            <li><a href="Sched_AssocSS_Availability_Extend_edit.aspx"> -Edit</a></li>
            <li><a href="#nogo33" class="fly">Management</a>
      <ul>
       <li><a href="Availability_Manager_Reset.aspx">Reset</a></li>
       <li><a href="Sched_AssocSS_Availability_Impersonation.aspx">Impersonation</a></li>
      </ul>
     </li>
  </ul>
 </li>
 <li class="top"><a href="#nogo22" id="Documentation" class="top_link"><span class="down">Documentation</span></a>
  <ul class="sub">
   <li><a href="#nogo23">User Guide</a></li>
   <li><a href="#nogo24">Tips</a></li>
  </ul>
 </li>
   
    </ul>

    </div>

   
        </td>
        </tr>
        <tr>
            <td style=" height: 100%; vertical-align: top;" rowspan="0">
                <asp:ContentPlaceHolder ID="TabContent" runat="server">
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                        <Scripts>
                            <%--Needed for JavaScript IntelliSense in VS2010--%>
                            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                            <asp:ScriptReference Assembly="Telerik.Web.UI"
                                Name="Telerik.Web.UI.Common.Core.js" />
                            <asp:ScriptReference Assembly="Telerik.Web.UI"
                                Name="Telerik.Web.UI.Common.jQuery.js" />
                            <asp:ScriptReference Assembly="Telerik.Web.UI"
                                Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                        </Scripts>
                    </telerik:RadScriptManager>
                   
                </asp:ContentPlaceHolder>
            </td>
        </tr>
    </table>
  
</asp:Content>
 ________________________________________________

My Page:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/AvailabilityLinksSubMaster.master" CodeBehind="MyAvailability.aspx.vb" Inherits="MSP.MyAvailability" %>
<%@ MasterType virtualpath="~/AvailabilityLinksSubMaster.master" %>
<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>
<%@ Register namespace="Telerik.Web.UI" tagprefix="UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        div.RadScheduler .rcOtherMonth
        {
           
           
        }
        div.RadScheduler .rsAllDayHeader,
        div.RadScheduler .rsVerticalHeaderTable div
        {
        font-weight: bold;
        text-align: right;
        }
 
        .rsApt
        {
        width: 45%!important;
       
        }
        .rsAllDayRow .rsWrap
        {
         display:none !important;
        }
        div.RadToolTip table.rtWrapper td.rtWrapperContent
        {
            background-color:none !important;
            background-image: url("../Images/Menu_Bkgrd_Normal2.png") !important;
        }

        .ScreenOnly {display : none;}
    </style>
   
    <link href="App_Themes/Default/Scheduler.Macys.css" rel="stylesheet"
        type="text/css" />
    <link href="App_Themes/Default/Calendar.Macys.css" rel="stylesheet"
        type="text/css" />
   
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TabContent" runat="server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
  <script type="text/javascript">
            function TimeRangeOnclick() {
          
     var scheduler = $find('<%=RadScheduler1.ClientID %>');
   
   
    var appointment = scheduler.get_appointments().findByID(59);
    scheduler.editAppointmentWithConfirmation(appointment);
};
      function hideActiveToolTip()
            {
          var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
          if (tooltip)
                {
              tooltip.hide();
          }
      }

      Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
      function beginRequestHandler(sender, args)
            {
          var prm = Sys.WebForms.PageRequestManager.getInstance();
          if (args.get_postBackElement().id.indexOf('RadScheduler1') != -1)
                {
              hideActiveToolTip();
          }
      }

      function OnClientRequestStart(sender, args)
            {
          args.set_cancel(true);
          var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
          if (tooltip)
                {
              var element = tooltip.get_targetControl();
              var apt = $find("<%=RadScheduler1.ClientID %>").getAppointmentFromDomElement(element);
                    <%--
              $get("startTime").innerHTML = apt.get_start().format("MM/dd/yyyy HH:mm");
              $get("endTime").innerHTML = apt.get_end().format("MM/dd/yyyy HH:mm");
                    --%>
              $get("descriptionDiv").innerHTML = "double click to edit your preference";
              tooltip.set_text($get("contentContainer").innerHTML);
          }
      }

  </script>
 </telerik:RadCodeBlock>                       
 
       
    <!-- Start Header -->
<!-- End Header -->
   
                    <table cellpadding="0" cellspacing="0" class="style5" cols="1" width="100%">
                        <tr>
                            <td valign="top">
  <!-- Top Menu -->
  
  <!-- End Top Menu -->
  <!-- Start Workspace --> 
                          <div id="Workspace" align="left" class="style6">
                                    <div id="PrintViewHeader" style="display: none;">
                                        <table border="0" cellpadding="1" cellspacing="1" cols="2" width="98%">
                                            <tbody class="SiteTextSmall">
                                                <tr>
                                                    <td align="center" class="PageHeading">
                                                        Availability</td>
                                                </tr>
                                                <tr class="ScreenOnly">
                                                    <td align="left">
                                                        <span class="SiteTextboldRed">For best results, change your printer setting to
                                                        landscape. </span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
   
   

    <!-- Schedule option -->
                        <table border="0" cellpadding="1" cellspacing="1" cols="1" width="98%">
                                        <tbody class="SiteTextSmall">
                                            <tr>
                                                <td colspan="1" rowspan="1">
                                                    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%">
                                                    <telerik:RadScheduler ID="RadScheduler1" runat="server" DayEndTime="23:59:59"
                                                        RowHeight="16px" SelectedView="WeekView"
                                                        WorkDayEndTime="8.00:00:00" WorkDayStartTime="00:00:00"
                                                        AllowDelete="False"
                                                        NumberOfHoveredRows="1" SelectedDate="2012-06-10"
                                                        EnableExactTimeRendering="True" Height="460px"
                                                        EnableEmbeddedSkins="False" Skin="Macys"
                                                        onclientappointmentcontextmenu="hideActiveToolTip"
                                                        onclientappointmentdoubleclick="hideActiveToolTip"
                                                        onclientrecurrenceactiondialogshowing="hideActiveToolTip"
                                                            OverflowBehavior="Expand">
                                                        <AdvancedForm Width="60%" Modal="True" />
                                                        <ResourceTypes>
                                                        <telerik:ResourceType DataSourceID="SqlDataSource2" ForeignKeyField="USERID"
                                                        KeyField="ID" Name="Users" TextField="USERNAME" />
                                                        </ResourceTypes>
                                                        <TimelineView UserSelectable="False" />
                                                        <WeekView DayEndTime="23:59:59" ColumnHeaderDateFormat="dddd, d"
                                                            GroupingDirection="Vertical" />
                                                        <Localization AdvancedEditAppointment="Edit" AdvancedNewAppointment="New"
                                                            AllDay="Range" />
                                                        <MonthView FirstDayHeaderDateFormat="MMMM dd" ColumnHeaderDateFormat="MMMM dddd"
                                                            HeaderDateFormat="MMMM, yyyy" />
                                                    </telerik:RadScheduler>
                                                   
                                                    <div align="center">                                                   
                                                        <asp:ImageButton ID="btnSubmit" runat="server"
                                                            ImageUrl="../images/b_submit_sm.gif" onclick="btnSubmit_Click" />
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                        <asp:ImageButton ID="btnCancel" runat="server"
                                                            ImageUrl="../images/b_cancel.gif" onclick="btnSubmit_Click" />
                                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                                        </div>
                                                       
                                                        &nbsp;<asp:SqlDataSource
                                                       
                                                        ID="SqlDataSource1" runat="server"
                                                        ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                                                        DeleteCommand="DELETE FROM &quot;AVAILABILITY_TEST&quot; WHERE &quot;ID&quot; = :ID"
                                                        InsertCommand="INSERT INTO &quot;AVAILABILITY_TEST&quot; (&quot;ID&quot;, &quot;SUBJECT&quot;, &quot;START_TIME&quot;, &quot;END_TIME&quot;, &quot;USERID&quot;, &quot;RECURRENCERULE&quot;, &quot;RECURRENCEPARENTID&quot;) VALUES (:ID, :SUBJECT, :START_TIME, :END_TIME, :USERID, :RECURRENCERULE, :RECURRENCEPARENTID)"
                                                        ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>"
                                                        SelectCommand="SELECT * FROM &quot;AVAILABILITY_TEST&quot;"
                                                        UpdateCommand="UPDATE &quot;AVAILABILITY_TEST&quot; SET &quot;SUBJECT&quot; = :SUBJECT, &quot;START_TIME&quot; = :START_TIME, &quot;END_TIME&quot; = :END_TIME, &quot;USERID&quot; = :USERID, &quot;RECURRENCERULE&quot; = :RECURRENCERULE, &quot;RECURRENCEPARENTID&quot; = :RECURRENCEPARENTID WHERE &quot;ID&quot; = :ID">
                                                        <DeleteParameters>
                                                            <asp:Parameter Name="ID" Type="Decimal" />
                                                        </DeleteParameters>
                                                        <InsertParameters>
                                                            <asp:Parameter Name="ID" Type="Decimal" />
                                                            <asp:Parameter Name="SUBJECT" Type="String" />
                                                            <asp:Parameter Name="START_TIME" Type="DateTime" />
                                                            <asp:Parameter Name="END_TIME" Type="DateTime" />
                                                            <asp:Parameter Name="USERID" Type="Decimal" />
                                                            <asp:Parameter Name="RECURRENCERULE" Type="String" />
                                                            <asp:Parameter Name="RECURRENCEPARENTID" Type="Decimal" />
                                                        </InsertParameters>
                                                        <UpdateParameters>
                                                            <asp:Parameter Name="SUBJECT" Type="String" />
                                                            <asp:Parameter Name="START_TIME" Type="DateTime" />
                                                            <asp:Parameter Name="END_TIME" Type="DateTime" />
                                                            <asp:Parameter Name="USERID" Type="Decimal" />
                                                            <asp:Parameter Name="RECURRENCERULE" Type="String" />
                                                            <asp:Parameter Name="RECURRENCEPARENTID" Type="Decimal" />
                                                            <asp:Parameter Name="ID" Type="Decimal" />
                                                        </UpdateParameters>
                                                    </asp:SqlDataSource><asp:SqlDataSource
                                                        ID="SqlDataSource2" runat="server"
                                                        ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                                                        ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>"
                                                        SelectCommand="SELECT &quot;ID&quot;, &quot;USERNAME&quot; FROM &quot;AVAILABILITY_TEST_USERS&quot;">
                                                    </asp:SqlDataSource>
                                                   
                    
                                                    <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Width="130"
                                                            Height="40" Skin = ""
                                                            OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" />
                                                    <div style="display: none;">
                                                        <div id="contentContainer">
                                                        <%--
                                                            Starts on: <span id="startTime"></span>
                                                            <br />
                                                            Ends on: <span id="endTime"></span>
                                                            <hr />
                   
                                                            Description:
                                                        --%>
                                                            <div id="descriptionDiv">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    </telerik:RadAjaxPanel>
                                                  </td>
                                            </tr>
                                           
                                        </tbody>
                                    </table>
    
    <!-- Permanent availability -->
                       
                                </div>
                            </td>
                        </tr>
                    </table>
  <!-- End Workspace -->    
 
</asp:Content>

 

 

 

1 Answer, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 13 Jul 2012, 02:23 PM
Hi Alen, 

 
You can refer to one of these forum posts where a similar issue have been discussed:
http://www.telerik.com/community/forums/aspnet-ajax/scheduler/rsheader-in-radscheduler-shown-above-radmenu.aspx 
http://www.telerik.com/community/forums/dotnetnuke/module-development/radmenu-z-index-with-radscheduler.aspx 

Hope this will be helpful.

Kind regards,
Plamen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Scheduler
Asked by
Allen
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Share this question
or