RadScheduler, RadAjaxManager and RadTooltipManager Problem

[Tobias Jeckle]

Hello,

Is there a way to use the RadAjaxManager and the RadToolTipManager together?

I want to use ajax for inserting and editing the appointments in the scheduler (http://demos.telerik.com/aspnet-ajax/scheduler/examples/outlook2007/defaultcs.aspx)
and the tooltip to show the appointment details (http://demos.telerik.com/aspnet-ajax/scheduler/examples/radtooltip/defaultcs.aspx).

I have both examples up an running. But as far as i try to implement both features, the tooltip doesn't come up.
When i remove the RadAjaxManager the tooltips works fine.

.....
    <div>
        <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>

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <ajaxsettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </ajaxsettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Office2007" />
        <asp:Panel ID="Panel1" runat="server">
            <telerik:RadScheduler ID="RadScheduler1" runat="server" Culture="German (Germany)"
                DataEndField="End" DataKeyField="ID" DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentID"
                DataSourceID="ObjectDataSourceAppointments" DataStartField="Start" DataSubjectField="Subject"
                HoursPanelTimeFormat="Htt" ShowFooter="False" Skin="Office2007" StartInFullTime="True"
                StartInsertingInAdvancedForm="True" ValidationGroup="RadScheduler1" SelectedView="MonthView"
                ShowFullTime="True" CustomAttributeNames="Inhaber" EnableCustomAttributeEditing="True"
                TimeZoneOffset="01:00:00" WorkDayEndTime="20:00:00" WorkDayStartTime="07:00:00"
                Width="900px" FirstDayOfWeek="Monday" LastDayOfWeek="Sunday" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound"
                OnAppointmentCreated="RadScheduler1_AppointmentCreated" OnDataBound="RadScheduler1_DataBound">
                <multidayview userselectable="false" />
                <timelineview userselectable="false" />
                <resourcetypes>
                    <telerik:ResourceType DataSourceID="ObjectDataSourceSegments" ForeignKeyField="SegmentID"
                        KeyField="ID" Name="Segment" TextField="SegmentName" />
                    <telerik:ResourceType DataSourceID="ObjectDataSourceMedientyp" ForeignKeyField="MedientypID"
                        KeyField="ID" Name="Medientyp" TextField="MedientypName" />
                </resourcetypes>
                <localization advancedalldayevent="All day"></localization>
                <advancedform dateformat="dd.MM.yyyy" timeformat="HH:mm" enablecustomattributeediting="True"
                    modal="True"></advancedform>
            </telerik:RadScheduler>
        </asp:Panel>
        <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
            <ContentTemplate>
                <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Width="320" Height="210"
                    Animation="None" HideEvent="LeaveToolTip" Text="Loading..." RelativeTo="Element"
                    OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" OnClientBeforeShow="clientBeforeShow"
                    Skin="Office2007" AutoTooltipify="false" />
            </ContentTemplate>
        </asp:UpdatePanel>

...

    </div>

...

        protected void Page_Load(object sender, EventArgs e)
        {
            RadScheduler1.AppointmentCreated += RadScheduler1_AppointmentCreated;
            RadScheduler1.DataBound += RadScheduler1_DataBound;
        }

        protected void RadScheduler1_AppointmentCreated(object sender, AppointmentCreatedEventArgs e)
        {
            string clientID = e.Appointment.ClientID;
            RadToolTipManager1.TargetControls.Add(clientID, e.Appointment.ID.ToString(), 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("~/controls/AppointmentToolTip.ascx");
            toolTip.TargetAppointment = apt;
            e.UpdatePanel.ContentTemplateContainer.Controls.Add(toolTip);

        }

        protected void RadScheduler1_DataBound(object sender, EventArgs e)
        {
            RadToolTipManager1.TargetControls.Clear();
            ScriptManager.RegisterStartupScript(this, typeof(Page), "HideToolTip", "hideActiveToolTip();", true);
        }

    }
}

Thanks a lot!!

Regards

Tobias

[Tobias Jeckle]

Little Update:

I have modified the RadAjaxManager. Added the RadToolTipManager to the UpdateControls.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <ajaxsettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </ajaxsettings>
        </telerik:RadAjaxManager>

When i move the mouse over the appointment, the ToolTip starts loading. It displays the loading image and closes it self before showing the content. This happens over and over again.

The Telerik version i am using is: 2009.2.826.35

[Tobias Jeckle]

I found the solution!

Heres is what i did:

• Removed the RadAjaxManager
• Replaced the ASPPanel by RadAjaxPanel
• Placed the RadTooltipManager in the RadAjaxPanel
• Removed the ASPUpdatePanel

 

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <%-- <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>--%>

        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Office2007" />

        <%--<asp:Panel ID="Panel1" runat="server">--%>

        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadScheduler ID="RadScheduler1" runat="server" Culture="German (Germany)"
                DataEndField="End" DataKeyField="ID" DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentID"
                DataSourceID="ObjectDataSourceAppointments" DataStartField="Start" DataSubjectField="Subject"
                HoursPanelTimeFormat="Htt" ShowFooter="False" Skin="Office2007" StartInFullTime="True"
                StartInsertingInAdvancedForm="True" ValidationGroup="RadScheduler1" SelectedView="MonthView"
                ShowFullTime="True" CustomAttributeNames="Inhaber" EnableCustomAttributeEditing="True"
                TimeZoneOffset="01:00:00" WorkDayEndTime="20:00:00" WorkDayStartTime="07:00:00"
                Width="900px" FirstDayOfWeek="Monday" LastDayOfWeek="Sunday" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound"
                OnAppointmentCreated="RadScheduler1_AppointmentCreated" OnDataBound="RadScheduler1_DataBound">
                <MultiDayView UserSelectable="false" />
                <TimelineView UserSelectable="false" />
                <ResourceTypes>
                    <telerik:ResourceType DataSourceID="ObjectDataSourceSegments" ForeignKeyField="SegmentID"
                        KeyField="ID" Name="Segment" TextField="SegmentName" />
                    <telerik:ResourceType DataSourceID="ObjectDataSourceMedientyp" ForeignKeyField="MedientypID"
                        KeyField="ID" Name="Medientyp" TextField="MedientypName" />
                </ResourceTypes>
                <Localization AdvancedAllDayEvent="All day"></Localization>
                <AdvancedForm DateFormat="dd.MM.yyyy" TimeFormat="HH:mm" EnableCustomAttributeEditing="True"
                    Modal="True"></AdvancedForm>
            </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"
                Skin="Office2007" AutoTooltipify="false" />
        </telerik:RadAjaxPanel>

        <%--</asp:Panel>--%>
        <%--<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
            <ContentTemplate>
                <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Width="320" Height="210"
                    Animation="None" HideEvent="LeaveToolTip" Text="Loading..." RelativeTo="Element"
                    OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" OnClientBeforeShow="clientBeforeShow"
                    Skin="Office2007" AutoTooltipify="false" />
            </ContentTemplate>
        </asp:UpdatePanel>--%>

[Roberto Yudice]

Thank you for sharing your solution, is helped me solved the problem.