Show RadToolTip on appointment click entirely client-side implementation

3 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 01 Nov 2011 Link to this post

    Requirements

    RadControls version

     Q1 2011 or higher

    .NET version

     4.0

    Visual Studio version

     2010

    programming language C# and VB.NET
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION

    This project demonstrates how to implement entirely client-side showing RadToolTip on appointment click. The content of the tooltip is populated with the client API of the appointment object.

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
     
                function OnClientAppointmentClick(sender, args) {
                    var apt = args.get_appointment();               
                    showTooltip(apt);
                }
     
                function showTooltip(apt) {     
                        var tooltip = $find('<%=RadToolTip1.ClientID %>');
                        tooltip.set_targetControl(apt.get_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 = apt.get_subject();
                        tooltip.set_text($get("contentContainer").innerHTML);
                        setTimeout(function () {
                            tooltip.show(); 
                        }, 20);
                    }
     
                function hideTooltip() {             
                    setTimeout(function () {
                        var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();
                        if (activeTooltip)
                        { activeTooltip.hide();}
                    }, 50);
                }
                         
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedDate="2011/11/01"
                SelectedView="MonthView" OnClientAppointmentDoubleClick="hideTooltip" OnClientAppointmentContextMenu="hideTooltip"
                OnClientAppointmentClick="OnClientAppointmentClick" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound"
                OnClientRecurrenceActionDialogShowing="hideTooltip"
                >
                <AdvancedForm Modal="true" />
            </telerik:RadScheduler>
            <telerik:RadToolTip ID="RadToolTip1" runat="server" RelativeTo="Element" Position="BottomCenter"
                AutoCloseDelay="0" ShowEvent="FromCode" Width="250px" >
                <div id="contentContainer">
                    Starts on: <span id="startTime"></span>
                    <br />
                    Ends on: <span id="endTime"></span>
                    <hr />
                    Description:
                    <div id="descriptionDiv">
                    </div>
                </div>
            </telerik:RadToolTip>
        </telerik:RadAjaxPanel>
  2. Michał
    Michał avatar
    1 posts
    Member since:
    Jun 2015

    Posted 31 Jan in reply to Telerik Admin Link to this post

    Hi, this works ideally, but how to enable client side tool tip also for mouse over?
  3. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 03 Feb Link to this post

    Hi,

    You can use the client - side implementation that is used in this online demo where a similar scenario worked correctly on mouse over.

    Regards,
    Plamen
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top