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

Converting 'click' tooltip to 'normal' tooltip

15 Answers 148 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Egbert
Top achievements
Rank 1
Egbert asked on 02 Dec 2013, 08:12 PM
Hi,

I'm now showing a tooltip by using a single click on an appointment. (see attachment)
I like to show the tooltip as a 'normal' tooltip, so when mouse is on/over the appointment.

How can I do this on the client side.

I'm now using the following piece of code:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Hours.aspx.cs" Inherits="Hours" %>
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript">
        //Shows whether an Appointment is inserted directly, or the
        //the Advanced Insert Form is opened when TreeView node is dropped on the Scheduler.
        var directlyInsertAppointment = false;
 
        function hideActiveToolTip() {
            var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
            if (tooltip) {
                tooltip.hide();
            }
        }
 
        function ClientAppointmentClick(sender, args) {
            var apt = args.get_appointment();
            showTooltip(apt);
        }
 
        function showTooltip(apt) {
            var attributes = apt.get_attributes();
            var tooltip = $find('<%=RadToolTip1.ClientID %>');
            tooltip.set_targetControl(apt.get_element());
            //// $get("startTime").innerHTML = apt.get_start().format("MM/dd/yyyy HH:mm");
            $get("startTime").innerHTML = apt.get_start().format("HH:mm ");
            $get("duration").innerHTML = attributes.getAttribute("Duration");
            $get("endTime").innerHTML = apt.get_end().format(" HH:mm");
            $get("appTitle").innerHTML = apt.get_subject();
            $get("projectTitle").innerHTML = attributes.getAttribute("ProjectTitle");
            $get("taskTitle").innerHTML = attributes.getAttribute("TaskTitle");
            var allowEditDelete = attributes.getAttribute("AllowEditDelete");
            if (allowEditDelete == "False") {
                $get("closedStatus").innerHTML = "Closed";
            }
            else {
                $get("closedStatus").innerHTML = "";
            }
 
            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);
        }
 
        function nodeDropping(sender, eventArgs) {
            var htmlElement = eventArgs.get_htmlElement();
            var scheduler = $find('<%= RadScheduler1.ClientID %>');
 
            if (isPartOfSchedulerAppointmentArea(htmlElement)) {
                //Gets the TimeSlot where an Appointment is dropped.
                var timeSlot = scheduler.get_activeModel().getTimeSlotFromDomElement(htmlElement);
                var startTime = timeSlot.get_startTime();
                var endTime = new Date(startTime);
 
                //Gets all the data needed for the an Appointment, from the TreeView node.
                var node = eventArgs.get_sourceNode();
                var text = node.get_text();
                var taskID = node.get_value();
                //var attributes = node.get_attributes();
                var duration = 0;
                //endTime.setMinutes(endTime.getMinutes() + parseInt(duration));
                var speaker = taskID;
                //var parentValue = node.get_parent().get_value();
                var category = 0;
 
                //New appointment is created. The start/end time, subject and category are set.
                var newAppointment = new Telerik.Web.UI.SchedulerAppointment();
                newAppointment.set_start(startTime);
                newAppointment.set_end(endTime);
                newAppointment.set_subject(text);
 
                //Checks for the user's choice of the method for inserting Appointments.
                if (directlyInsertAppointment) {
                    scheduler.insertAppointment(newAppointment);
                }
                else {
                    //If Advanced Form is opened, the information from the TreeVew node is stored in a hidden input.
                    //var appointmentInfo = { subject: text, duration: duration, speaker: speaker, category: category };
                    //var appointmentInfoSerialized = Sys.Serialization.JavaScriptSerializer.serialize(appointmentInfo);
                    $get("<%=HiddenInputAppointmentInfo.ClientID%>").value = taskID; //  appointmentInfoSerialized;
                    scheduler.showInsertFormAt(timeSlot);
                }
            }
            else {
                //The node was dropped elsewhere on the document.
                eventArgs.set_cancel(true);
            }
        }
 
        function isPartOfSchedulerAppointmentArea(htmlElement) {
            // Determines if an HTML element is part of the scheduler appointment area.
            // This can be either the rsContent or the rsAllDay div (in day and week view).
            return $telerik.$(htmlElement).parents().is("div.rsAllDay") ||
                            $telerik.$(htmlElement).parents().is("div.rsContent")
        }
 
        function AppointmentDoubleClick(sender, args) {
            var apt = args.get_appointment();
            var attributes = apt.get_attributes();
            var allowEditDelete = attributes.getAttribute("AllowEditDelete");
            if (allowEditDelete == "True") {
                window.location.href = "hoursitem.aspx";
            }
        }
 
        function appointmentMoving(sender, args) {
            // hideTooltip();
        }
    </script>
    <style type="text/css">
        .divRadios
        {
            margin-bottom: 15px;
        }
        .background
        {
            background: url("arrows.png") no-repeat scroll 0 0 transparent;
            padding: 115px 0 0 0px;
            margin-left: 45px;
        }
         
        #RadTreeView1
        {
            margin-bottom: 15px;
        }
        .divTree
        {
            float: left;
            width: 20%;
        }
        .schedulerPositioning
        {
            width: 80%;
            float: left;
            display: block;
        }
        .summaryInfo
        {
            padding: 0;
            margin: 0;
            width: 99.9%;
            float: left;
            border: 1px solid black;
            background-color: LightGray;
        }
        .summaryTextBoxColumn
        {
            width: 50px;
        }
        input[readonly]
        {
            background-color: #F0F0F0 !important;
            color: #303030 !important;
        }
        #RadTextBox
        {
            readonly: true;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript">
    </script>
    <div class="summaryInfo">
        <table>
            <tr>
                <td>
                    Ma
                </td>
                <td class="summaryTextBoxColumn">
                    <telerik:RadTextBox runat="server" ID="tbMonday" Width="45px" Enabled="false" DisabledStyle-BorderColor="DarkGray">
                    </telerik:RadTextBox>
                </td>
                <td>
                    Di
                </td>
                <td class="summaryTextBoxColumn">
                    <telerik:RadTextBox runat="server" ID="tbTuesday" Width="45px" Enabled="false" DisabledStyle-BorderColor="DarkGray">
                    </telerik:RadTextBox>
                </td>
                <td>
                    Wo
                </td>
                <td class="summaryTextBoxColumn">
                    <telerik:RadTextBox runat="server" ID="tbWednesday" Width="45px" Enabled="false"
                        DisabledStyle-BorderColor="DarkGray">
                    </telerik:RadTextBox>
                </td>
                <td>
                    Do
                </td>
                <td class="summaryTextBoxColumn">
                    <telerik:RadTextBox runat="server" ID="tbThursday" Width="45px" Enabled="false" DisabledStyle-BorderColor="DarkGray">
                    </telerik:RadTextBox>
                </td>
                <td>
                    Vr
                </td>
                <td class="summaryTextBoxColumn">
                    <telerik:RadTextBox runat="server" ID="tbFriday" Width="45px" Enabled="false" DisabledStyle-BorderColor="DarkGray">
                    </telerik:RadTextBox>
                </td>
                <td>
                    Za/Zo
                </td>
                <td class="summaryTextBoxColumn">
                    <telerik:RadTextBox runat="server" ID="tbSatSunday" Width="45px" Enabled="false"
                        DisabledStyle-BorderColor="DarkGray">
                    </telerik:RadTextBox>
                </td>
                <td>
                    Week
                </td>
                <td class="summaryTextBoxColumn">
                    <telerik:RadTextBox runat="server" ID="tbWeek" Width="45px" Enabled="false" DisabledStyle-BorderColor="DarkGray">
                    </telerik:RadTextBox>
                </td>
                <td>
                    Jaar
                </td>
                <td class="summaryTextBoxColumn">
                    <telerik:RadTextBox runat="server" ID="tbYear" Width="55px" Enabled="false" DisabledStyle-BorderColor="DarkGray">
                    </telerik:RadTextBox>
                </td>
            </tr>
        </table>
    </div>
    <div class="schedulerPositioning">
        <telerik:RadScheduler ID="RadScheduler1" runat="server" OnAppointmentInsert="RadScheduler1_AppointmentInsert"
            OnAppointmentUpdate="RadScheduler1_AppointmentUpdate" OnAppointmentDelete="RadScheduler1_AppointmentDelete"
            OnFormCreating="RadScheduler1_FormCreating" OnAppointmentCancelingEdit="RadScheduler1_AppointmentCancelingEdit"
            RowHeight="17" OnNavigationCommand="RadScheduler1_NavigationCommand" OnNavigationComplete="RadScheduler1_NavigationComplete"
            MinutesPerRow="15" DayStartTime="06:30:00" DayEndTime="17:30:00" FirstDayOfWeek="Monday"
            OnAppointmentClick="RadScheduler1_AppointmentClick" OnAppointmentCommand="RadScheduler1_AppointmentCommand"
            OnClientAppointmentClick="ClientAppointmentClick" LastDayOfWeek="Friday" MultiDayView-NumberOfDays="5"
            Height="80%" OnClientAppointmentDoubleClick="AppointmentDoubleClick" SelectedView="WeekView"
            CustomAttributeNames="TaskTitle, ProjectTitle, Duration, AllowEditDelete" EnableCustomAttributeEditing="false"
            OnAppointmentDataBound="RadScheduler1_AppointmentDataBound" MonthView-MinimumRowHeight="9"
            MonthView-VisibleAppointmentsPerDay="6" TimelineView-UserSelectable="False">
        </telerik:RadScheduler>
        <telerik:RadToolTip ID="RadToolTip1" runat="server" RelativeTo="Element" Position="BottomCenter"
            AutoCloseDelay="0" ShowEvent="FromCode" Width="250px">
            <div id="contentContainer">
                <div class="appointment-tooltip">
                    <b>Titel:</b> <span id="appTitle"></span>
                    <p>
                        <b>Tijd:</b> <span id="startTime"></span>-<span id="endTime"> </span>
                        <br />
                        <b>Duur: </b><span id="duration"></span>
                    </p>
                    <hr />
                    <b>Project:</b> <span id="projectTitle"></span>
                    <br />
                    <b>Taak:</b> <span id="taskTitle"></span>
                    <br />
                    <center>
                        <b><span id="closedStatus" style="color: #FF0000;"></span></b>
                    </center>
                </div>
            </div>
        </telerik:RadToolTip>
        <input id="HiddenInputAppointmentInfo" name="HiddenInputAppointmentInfo" type="hidden"
            runat="server" />
    </div>
    <%--    <div id="yourHiddenPanel" style="visibility: visible; background-color: #00FF00;
        height: 30px;">
        <asp:Button runat="server" Text="gggggg" />
    </div>
    --%>
    <div class="divTree">
        <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="true" EnableDragAndDropBetweenNodes="False"
            Skin="Vista" ShowLineImages="true" OnClientNodeDropping="nodeDropping" Visible="true">
        </telerik:RadTreeView>
    </div>
    <telerik:RadWindowManager runat="server" RestrictionZoneID="offsetElement" ID="RadWindowManager1"
        EnableShadow="true" ShowOnTopWhenMaximized="false">
        <Windows>
            <telerik:RadWindow ID="RadWindowWarning" VisibleOnPageLoad="false" Title="Warning"
                runat="server" Modal="true" AutoSize="false" Width="400" Height="160" VisibleTitlebar="true"
                VisibleStatusbar="False" Behaviors="None">
                <ContentTemplate>
                    <p style="text-align: center;">
                        <asp:Label runat="server" ID="labelWarning" Text="Warning text!"></asp:Label>
                    </p>
                    <p style="padding: 10px; text-align: center;">
                        <telerik:RadButton ID="ButtonWindowOK" Text="OK" AutoPostBack="true" runat="server"
                            OnClick="ButtonWindowOK_Click" />
                    </p>
                </ContentTemplate>
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
</asp:Content>

Thanks,
Egbert

15 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 03 Dec 2013, 01:43 PM
Hi Egbert

Here is a nice demo which marks your requirement.
Scheduler - Using RadToolTip
Hope this helps

Thanks
Shinu
0
Egbert
Top achievements
Rank 1
answered on 03 Dec 2013, 02:41 PM
Hi,

I've seen this example, but the combination with server side and client side makes it difficult for me to see what I need.
I like to see an example with only the stuff I need for client side tooltips.

Best regards,
Egbert
0
Boyan Dimitrov
Telerik team
answered on 05 Dec 2013, 04:10 PM
Hello Egbert,

Please find attached a sample project with RadScheduler control implementing tool tip functionality on the client side.



Regards,
Boyan Dimitrov
Telerik
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 the blog feed now.
0
Egbert
Top achievements
Rank 1
answered on 07 Dec 2013, 12:17 PM
Hello Boyan,

Thank you for the quick response and this example.
The problem now is, I can't get your example working.

It's running, tooltip appears and shows the Loading... message.
But after that, no data in tooltip and tooltip disappears ;-(

Thanks and best regards,
Egbert
0
Egbert
Top achievements
Rank 1
answered on 11 Dec 2013, 11:02 AM
Hi,

Do you have an example for me that works?
Or is this example working and am I doing something wrong?

Best regards,
Egbert
0
Boyan Dimitrov
Telerik team
answered on 11 Dec 2013, 01:41 PM
Hello,

I would like to apologize for any inconveniences caused.

I have modified the sample project in order to show the appointment tool tip properly. Please find it attached to this response.


Regards,
Boyan Dimitrov
Telerik
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 the blog feed now.
0
Egbert
Top achievements
Rank 1
answered on 16 Dec 2013, 06:53 AM
Hi,

Everything works great now.

Thanks....
0
Anatoliy
Top achievements
Rank 2
answered on 21 Jan 2015, 10:15 AM
Hi Boyan,

Thank you for sample,
it's work fine if there no other controls which tool-tip must be overridden too. 
How to be in such case?

In my solution I use asp master page structure.
In  master page I have RadToolTipManager (which overrides tool-tip in all related child-pages).
So, you may guess what I have on my 'Scheduling' page (with RadScheduler control),
there is RadToolTip that I show with single click appointment.

What you can propose me?

Best regards, Anatoliy

0
Boyan Dimitrov
Telerik team
answered on 26 Jan 2015, 09:58 AM
Hello,

I would suggest using a RadToolTip control in the child page and show the tool tip on client appointment click as shown below:
//JavaScript
var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
           tooltip.hide();
           if (tooltip) {
 
               var apt = args.get_appointment();
               $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);
               tooltip.set_targetControl(args.get_appointment().get_element());
               tooltip.show();
           }



Regards,
Boyan Dimitrov
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.

 
0
Anatoliy
Top achievements
Rank 2
answered on 26 Jan 2015, 03:38 PM
Hi Boyan Dimitrov,

You must read thoroughly with my message! Do you understand what I mean?

'there is RadToolTip that I show with single click appointment.'  == 'show the tool tip on client appointment click'

so question is still waiting for answering:

If there (on web-page with scheduler control) exists other controls which tool-tip must be overridden too. 
How to be in such case?

Best regards, Anatoliy
0
Boyan Dimitrov
Telerik team
answered on 27 Jan 2015, 06:19 PM
Hello Anatoliy,

I am afraid that I am not complete sure that I understand your scenario.

A possible solution to avoid the automatic tool tip generation functionality is to set the RadToolTipManager property AutoTooltipify to 'false'. The following demo shows how to enable the RadToolTipManager automatic tool tip generation.

If you want to show tool tips for other controls except the RadScheduler you can user the RadToolTipManager TargetControls collection as explained in the Using the TargetControls Collection article.


Regards,
Boyan Dimitrov
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.

 
0
Anatoliy
Top achievements
Rank 2
answered on 03 Feb 2015, 09:14 AM
Hello Boyan,

I wrote a simple project with RadScheduler and RadButton which both are using RadTooltips.
I'm confused with empty tooltips under appointments, but sometimes they are filled.
So, can you check it and show me the right decision?

Best regards, Anatoliy
0
Boyan Dimitrov
Telerik team
answered on 06 Feb 2015, 11:58 AM
Hello Anatoliy,

I reviewed your code and it the problem is caused by setting the RadToolTipManager AutoTooltipify="true" in the master page.

Since by default the appointment elements have title attribute the RadToolTipManager from the master page tries to show a tool tip for those elements. In the same time the RadToolTipManager from the Scheduler page also tries to show your custom tool tip for the same element.
This leads to conflict and might cause some unexpected behavior ( for example showing empty tool tip and etc.).
This is why we suggest using this functionality of the RadToolTopManager only for some really basic cases ( a simple form with label controls where you want to override the default tool tip). For some complex scenario is quite possible to face some issues.

In this case the only solution would be to stop the auto tooltipify functionality of the RadToolTipManager in the master page.
<telerik:RadToolTipManager runat="server" ID="MainRadToolTipManager" ShowEvent="OnMouseOver"
                ShowDelay="200" AutoCloseDelay="5000" AutoTooltipify="false" RelativeTo="Element" />


Regards,
Boyan Dimitrov
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.

 
0
Anatoliy
Top achievements
Rank 2
answered on 06 Feb 2015, 02:23 PM
Hi,

I'm looking for using attractive for my web-site users design.

So what can you suggest for applying both types of tooltips?

Cause if I switch off AutoTooltipify, tooltip on a button became default. This style feature can't be particular for one privilege control (RadScheduler).

Regards, Anatoliy
0
Boyan Dimitrov
Telerik team
answered on 11 Feb 2015, 01:39 PM
Hello Anatoliy,

In order to apply tool tip for the button control or any other control on the page except for the RadScheduler you can show the tool tip explicitly as demonstrated in this demo.

My suggestion would be showing the tool tip on mouse over on all elements that have title attribute except for the appointments and time slots (you already have a tool tip for the appointments).
//selector
$telerik.$("[title]:not([id*='RadScheduler'])").not("td")


In case of Ajax scenario you might need to retrieve those elements using this selector after each post-back. This is due to the fact that if you add some new elements to the page with title attribute they will not not be part of the collection.

You can use PageRequestManager endRequest Event, iterate through the elements within the update panel and attach mouse over event in order to show the tool tip for those elements as well.

Regards,
Boyan Dimitrov
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
Egbert
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Egbert
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Anatoliy
Top achievements
Rank 2
Share this question
or