RadScheduler - RadToolTipManager

[Mehmet]

Hi there,

I am implementing a Radtooltipmanager in my scheduler page which is working with the web service. And I want to use the tooltipmanager on the client side, no need to do server side. However, I cannot fire the tooltipmanager javascript in my aspx page. Could anyone give me an idea ?
thank you

001.<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
002.    <link href="Styles/Tooltip.css" rel="stylesheet" type="text/css" />
003.</asp:Content>
004.<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
005.    <div id="content">
006.        <asp:HiddenField ID="hdfSelectedTab" runat="server" Value="0" EnableViewState="true" />
007.        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
008.            <Scripts>
009.                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
010.                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
011.            </Scripts>
012.        </telerik:RadScriptManager>
013.        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
014.            <AjaxSettings>
015.                <telerik:AjaxSetting AjaxControlID="RadScheduler1">
016.                    <UpdatedControls>
017.                        <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
018.                    </UpdatedControls>
019.                </telerik:AjaxSetting>
020.            </AjaxSettings>
021.        </telerik:RadAjaxManager>
022.        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
023.        </telerik:RadAjaxLoadingPanel>
024.        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
025.            <script type="text/javascript">
026.                var hdfSelectedTab = $('#<%=hdfSelectedTab.ClientID%>');
027.            </script>
028.
029.            <script type="text/javascript">
030.                //<![CDATA[
031.                var categoryNames = new Array();
032.
033.                function OnClientAppointmentsPopulating(sender, eventArgs) {
034.                    addSelectedCategoriesToArray(categoryNames);
035.                    eventArgs.get_schedulerInfo().CategoryNames = categoryNames;
036.                    categoryNames = new Array(); //clear the array
037.                }
038.
039.                function OnClientAppointmentWebServiceInserting(sender, args) {
040.                    //set a default Calendar resource
041.                    if (args.get_appointment().get_resources().get_count() == 0) {
042.                        var defaultCalendarResource = sender.get_resources().getResourceByTypeAndKey("Calendar", 1);
043.                        args.get_appointment().get_resources().add(defaultCalendarResource);
044.                    }
045.                }
046.
047.                function rebindScheduler() {
048.                    var scheduler = $find('<%=RadScheduler1.ClientID %>');
049.                    scheduler.rebind();
050.                }
051.
052.                //function onSchedulerDataBound(scheduler) {
053.                //    var $ = jQuery;
054.                //    $(".rsAptDelete").each(function () {
055.                //        var apt = scheduler.getAppointmentFromDomElement(this);
056.                //        // creating an object containing the data that should be applied on the template
057.                //        var tmplValue = { Description: apt.get_description() };
058.                //        // instantiate the template, populate it and insert before the delete handler (".rsAptDelete")
059.                //        $("#tmplAppDescription").tmpl(tmplValue).insertBefore(this);
060.                //    });
061.                //}
062.
063.                function OnClientAppointmentDataBound(sender, eventArgs) {
064.                    var app = eventArgs.get_appointment();
065.                    var jobTitle = app.get_attributes().getAttribute("JobTitle");
066.                    //app.Description = jobTitle;
067.
068.                    //if (backColor)
069.                    //    app.set_backColor(backColor);
070.                    app.set_borderColor("black");
071.                    app.set_borderWidth("1");
072.
073.                }
074.                //]]>
075.
076.                //<![CDATA[
077.                function hideActiveToolTip() {
078.                    var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
079.                    if (tooltip) {
080.                        tooltip.hide();
081.                    }
082.                }
083.
084.                Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
085.                function beginRequestHandler(sender, args) {
086.                    if (args.get_postBackElement().id.indexOf('RadScheduler1') != -1) {
087.                        hideActiveToolTip();
088.                    }
089.                }
090.
091.                function OnClientRequestStart(sender, args) {
092.                    alert('aa');
093.                    args.set_cancel(true);
094.                    var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
095.                    if (tooltip) {
096.                        var element = tooltip.get_targetControl();
097.                        var apt = $find("<%=RadScheduler1.ClientID %>").getAppointmentFromDomElement(element);
098.                        $get("startTime").innerHTML = apt.get_start().format("MM/dd/yyyy HH:mm");
099.                        $get("endTime").innerHTML = apt.get_end().format("MM/dd/yyyy HH:mm");
100.                        $get("descriptionDiv").innerHTML = apt.get_subject();
101.                        tooltip.set_text($get("contentContainer").innerHTML);
102.
103.                    }
104.                }
105.
106.                function OnClientAppointmentContextMenu(sender, args) {
107.                    hideActiveToolTip();
108.                }
109.                //]]>
110.            </script>
111.        </telerik:RadCodeBlock>
112.        <div class="tab_content" id="defaultSchedule">
113.            <telerik:RadButton ID="btnExportSchedulePdf" runat="server" Text="Export to PDF" CssClass="pdfButton"
114.                ValidationGroup="ValidatePageSize">
115.                <Icon PrimaryIconUrl="images/pdf.gif"></Icon>
116.            </telerik:RadButton>
117.            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1"
118.                CssClass="exampleContainer">
119.                <div style="padding: 10px;">
120.                    <telerik:RadComboBox runat="Server" ID="cmbStaff" Width="200px"
121.                        AutoPostBack="True">
122.                    </telerik:RadComboBox>
123.                </div>
124.                <telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedView="MonthView" Height="100%" OnClientAppointmentContextMenu="OnClientAppointmentContextMenu"
125.                    TimeZoneOffset="03:00:00" FirstDayOfWeek="Monday" LastDayOfWeek="Friday" StartEditingInAdvancedForm="true" Skin="Office2010Silver"
126.                    EnableDescriptionField="true" OverflowBehavior="Auto" AppointmentStyleMode="Default" OnClientAppointmentDataBound="OnClientAppointmentDataBound" CustomAttributeNames="StaffID,JobStatusID,ClientID,Address,ContactNumber,Suburb,State,Postcode,StaffName,JobStatusName,ClientName,JobTitle"
127.                    ShowAllDayRow="False">
128.                    <AdvancedForm Modal="true"></AdvancedForm>
129.                    <TimelineView GroupBy="Calendar" GroupingDirection="Vertical"></TimelineView>
130.                    <WebServiceSettings Path="Schedule/SchedulerWebService.asmx" ResourcePopulationMode="ServerSide">
131.                    </WebServiceSettings>
132.                    <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
133.                    <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
134.                </telerik:RadScheduler>
135.                <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Width="320" Height="170"
136.                    Animation="None" HideEvent="Default" Text="Loading..." OnClientRequestStart="OnClientRequestStart">
137.                </telerik:RadToolTipManager>
138.                <div style="display: none;">
139.                    <div id="contentContainer">
140.                        <div class="appointment-tooltip">
141.                            <p>
142.                                Starts on: <span id="startTime">
143.                                    <!-- -->
144.                                </span>
145.                                <br />
146.                                Ends on: <span id="endTime">
147.                                    <!-- -->
148.                                </span>
149.                            </p>
150.                            <hr />
151.                            Description:
152.                            <div id="descriptionDiv">
153.                            </div>
154.                        </div>
155.                    </div>
156.                </div>
157.            </telerik:RadAjaxPanel>
158.        </div>
159.    </div>
160.</asp:Content>

[Mehmet]

Can I get an answer please ?
thank you

[Mehmet]

Could anybody help me in regards?
thank you

[Plamen]

Hi,

In case of Web Service binding we recommend adding the element of the tooltip from the client side as in the attached sample page.

Hope this will help you solve the issue.

Regards,
Plamen
Telerik