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:
Thanks,
Egbert
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