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

RadScheduler - RadToolTipManager

3 Answers 34 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Mehmet
Top achievements
Rank 1
Mehmet asked on 29 Aug 2014, 11:10 AM
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>

3 Answers, 1 is accepted

Sort by
0
Mehmet
Top achievements
Rank 1
answered on 01 Sep 2014, 12:10 AM
Can I get an answer please ?
thank you
0
Mehmet
Top achievements
Rank 1
answered on 02 Sep 2014, 04:37 AM
Could anybody help me in regards?
thank you
0
Plamen
Telerik team
answered on 03 Sep 2014, 06:19 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Scheduler
Asked by
Mehmet
Top achievements
Rank 1
Answers by
Mehmet
Top achievements
Rank 1
Plamen
Telerik team
Share this question
or