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

Converting 'click' tooltip to 'normal' tooltip

15 Answers 269 Views

Scheduler

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

Egbert asked on 02 Dec 2013, 08:12 PM

RadschedulerTooltip.PNG

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>

</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

answered on 05 Dec 2013, 04:10 PM

RadSchedulerToolTipClientSide.zip

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.

answered on 11 Dec 2013, 01:41 PM

RadSchedulerToolTipClientSide.zip

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

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.

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.

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.

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.