RadScheduler - RadToolTipManager

4 posts, 0 answers
  1. Mehmet
    Mehmet avatar
    100 posts
    Member since:
    Jun 2014

    Posted 29 Aug 2014 Link to this post

    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>
  2. Mehmet
    Mehmet avatar
    100 posts
    Member since:
    Jun 2014

    Posted 31 Aug 2014 Link to this post

    Can I get an answer please ?
    thank you
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mehmet
    Mehmet avatar
    100 posts
    Member since:
    Jun 2014

    Posted 01 Sep 2014 Link to this post

    Could anybody help me in regards?
    thank you
  5. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 03 Sep 2014 Link to this post

    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.

     
Back to Top