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

Tooltip Example

5 Answers 140 Views

Scheduler

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

5 Answers, 1 is accepted

answered on 09 Sep 2010, 05:02 PM

Hi Veronica ,

Since there is no way to upload a zip folder, here is the code. The area causing trouble is the last three lines that are commented out in the RadToolTipManager1_AjaxUpdate event.

Thanks!

Calendar.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="calendar.aspx.cs" Inherits="Sandbox.calendar" %>

<%@ Reference Control="~/UserControls/AppointmentTooltop.ascx" %>

<%@ Register Src="~/UserControls/AppointmentTooltop.ascx" TagName="MyToolTip" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script type="text/javascript">

//<![CDATA[

function hideActiveToolTip() {

var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();

if (tooltip) {

tooltip.hide();

}

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);

function beginRequestHandler(sender, args) {

var prm = Sys.WebForms.PageRequestManager.getInstance();

if (args.get_postBackElement().id.indexOf('RadScheduler1') != -1) {

hideActiveToolTip();

}

function clientBeforeShow(sender, eventArgs) {

w = $telerik.$(window).width() / 2;

h = $telerik.$(window).height() / 2;

if ((sender._mouseX > w) && (sender._mouseY > h)) {

sender.set_position(Telerik.Web.UI.ToolTipPosition.TopLeft);

return;

}

if ((sender._mouseX < w) && (sender._mouseY > h)) {

sender.set_position(Telerik.Web.UI.ToolTipPosition.TopRight);

return;

}

if ((sender._mouseX > w) && (sender._mouseY < h)) {

sender.set_position(Telerik.Web.UI.ToolTipPosition.BottomLeft);

return;

}

sender.set_position(Telerik.Web.UI.ToolTipPosition.BottomRight);

}

//]]>

</script>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<div>

<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">

<ContentTemplate>

<telerik:RadScheduler DataSourceID="AppointmentsDataSource" ID="RadScheduler1" AllowEdit="true" AllowDelete="true" AllowInsert="true"

DataKeyField="ID" DataSubjectField="Subject" DataStartField="StartDate" DataEndField="EndDate"

runat="server" OverflowBehavior="Scroll" DayStartTime="08:00:00" DayEndTime="19:00:00"

DataDescriptionField="Description" SelectedView="MonthView">

</telerik:RadScheduler>

<telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Width="320" Height="210"

Animation="None" HideEvent="LeaveToolTip" Text="Loading..." RelativeTo="Element"

OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" OnClientBeforeShow="clientBeforeShow" EnableShadow="true" />

</ContentTemplate>

</asp:UpdatePanel>

<asp:SqlDataSource ID="AppointmentsDataSource" runat="server"

SelectCommand="SELECT * FROM [calendar]"

InsertCommand="INSERT INTO [calendar] (Subject, StartDate, EndDate, Description) VALUES (@Subject, @Start, @End. @Description)"

ConnectionString="<%$ ConnectionStrings:dbConn %>">

<InsertParameters>

<asp:Parameter Name="Subject" Type="String" />

<asp:Parameter Name="Start" Type="DateTime" />

<asp:Parameter Name="End" Type="DateTime" />

<asp:Parameter Name="Description" Type="String" />

</InsertParameters>

</asp:SqlDataSource>

</div>

</form>

</body>

</html>

Calendar.aspx.cs:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using Telerik.Web.UI;

namespace Sandbox

{

    public partial class calendar : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            RadScheduler1.AppointmentCreated += RadScheduler1_AppointmentCreated;

            RadScheduler1.DataBound += RadScheduler1_DataBound;

        }

        protected void RadScheduler1_AppointmentCreated(object sender, AppointmentCreatedEventArgs e)

        {

            if (e.Appointment.Visible && !IsAppointmentRegisteredForTooltip(e.Appointment))

            {

                string id = e.Appointment.ID.ToString();

                foreach (string domElementID in e.Appointment.DomElements)

                {

                    RadToolTipManager1.TargetControls.Add(domElementID, id, true);

                }

            }

        }

        private bool IsAppointmentRegisteredForTooltip(Appointment apt)

        {

            foreach (ToolTipTargetControl targetControl in RadToolTipManager1.TargetControls)

            {

                if (apt.DomElements.Contains(targetControl.TargetControlID))

                {

                    return true;

                }

            }

            return false;

        }

        protected void RadScheduler1_DataBound(object sender, EventArgs e)

        {

            RadToolTipManager1.TargetControls.Clear();

            ScriptManager.RegisterStartupScript(this, typeof(Page), "HideToolTip", "hideActiveToolTip();", true);

        }

        protected void RadToolTipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)

        {

            int aptId;

            Appointment apt;

            if (!int.TryParse(e.Value, out aptId))//The appoitnment is occurrence and FindByID expects a string

                apt = RadScheduler1.Appointments.FindByID(e.Value);

            else //The appointment is not occurrence and FindByID expects an int

                apt = RadScheduler1.Appointments.FindByID(aptId);

            //AppointmentToolTip toolTip = (AppointmentToolTip)LoadControl("/UserControls/AppointmentToolTip.ascx");

            //toolTip.TargetAppointment = apt;

            //e.UpdatePanel.ContentTemplateContainer.Controls.Add(toolTip);

        }

    }

}

ApointmentTooltip.aspx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AppointmentTooltop.ascx.cs" Inherits="Sandbox.UserControls.AppointmentTooltop" %>

<div style="margin:5px 5px 0px 5px; font-size:12px; padding-bottom: 10px;">

    <div style="border-bottom:solid 1px #ccc;margin-bottom:9px;font-size:11px;">Starting on: <asp:Label runat="server" ID="StartingOn"></asp:Label></div>

    <asp:Literal runat="server" ID="FullText"></asp:Literal>

</div>

AppointmentTooltip.ascx.cs:

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

namespace Sandbox.UserControls

{

    public partial class AppointmentTooltop : System.Web.UI.UserControl

    {

        private Appointment apt;

        public Appointment TargetAppointment

        {

            get

            {

                return apt;

            }

            set

            {

                apt = value;

            }

        }

        protected override void OnPreRender(EventArgs e)

        {

            base.OnPreRender(e);

            StartingOn.Text = apt.Owner.UtcToDisplay(apt.Start).ToString();

            FullText.Text = apt.Subject;

        }

    }

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Tooltip Example

5 Answers, 1 is accepted