Telerik Forums / UI for ASP.NET AJAX Forum / Scheduler /

Timeline looks weird in IE8-10 compatibility view

Telerik UI for ASP.NET AJAX
Resources Buy Try

3 posts, 0 answers

christian

13 posts

Member since:
May 2009
Posted 29 Mar 2013 Link to this post

Hello,

I have a issue with the timeline view in the compatibility mode of IE8-10. I'm using latest Q1 2013 release.
The problem appears only when i don't set RadScheduler1.ColumnWidth. I don't want to set the width so it automatically sizes the columns to the available space. I was not able to reproduce this issue with your live samples and unfortunately I cannot find what's causing the issue.

i have following html

<!DOCTYPE html>

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

<head id="Head1" runat="server">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    <title></title>

    <style>

        .rsArrowLeft, .rsArrowRight

        {

            visibility: hidden;

        }

    </style>

</head>

<body class="stageCRM40" style="margin: 0px;">

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

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <div id="scheduler">

        <telerik:RadScheduler ID="RadScheduler1" runat="server" AllowDelete="False" AllowEdit="False"

            AllowInsert="False" EnableDatePicker="False" ReadOnly="True" SelectedView="TimelineView"

            ShowNavigationPane="False" ShowViewTabs="False" ShowHeader="False" FirstDayOfWeek="Monday"

            LastDayOfWeek="Sunday" Culture="German (Germany)" OnClientAppointmentDoubleClick="appDoubleClick"

            OnClientAppointmentContextMenuItemClicked="contextMenuClicked" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound"

            RowHeaderWidth="150px" OverflowBehavior="Scroll">

            <TimelineView ReadOnly="True" ShowInsertArea="False" />

            <AppointmentContextMenuSettings EnableDefault="True" />

            <AppointmentContextMenus>

                <telerik:RadSchedulerContextMenu runat="server" ID="appContextMenu">

                    <Items>

                    </Items>

                </telerik:RadSchedulerContextMenu>

            </AppointmentContextMenus>

        </telerik:RadScheduler>

    </div>

    </form>

</body>

</html>

I also have following custom app template

class CustomAppTemplate : ITemplate

        {

            private int customLines = 0;

            public CustomAppTemplate(int customLines)

            {

                this.customLines = customLines;

            }

            public void InstantiateIn(Control container)

            {

                System.Web.UI.HtmlControls.HtmlGenericControl start = new System.Web.UI.HtmlControls.HtmlGenericControl("span");

                start.DataBinding += new EventHandler(start_DataBinding);

                start.Style.Add("white-space", "nowrap");

                container.Controls.Add(start);

                System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("span");

                div.InnerText = " - ";

                div.Style.Add("white-space", "nowrap");

                container.Controls.Add(div);

                System.Web.UI.HtmlControls.HtmlGenericControl end = new System.Web.UI.HtmlControls.HtmlGenericControl("span");

                end.DataBinding += new EventHandler(end_DataBinding);

                end.Style.Add("white-space", "nowrap");

                container.Controls.Add(end);

                System.Web.UI.HtmlControls.HtmlGenericControl lineBreak2 = new System.Web.UI.HtmlControls.HtmlGenericControl("div");

                container.Controls.Add(lineBreak2);

                System.Web.UI.HtmlControls.HtmlGenericControl subject = new System.Web.UI.HtmlControls.HtmlGenericControl("span");

                subject.DataBinding += new EventHandler(subject_DataBinding);

                subject.Style.Add("white-space", "nowrap");

                container.Controls.Add(subject);

                for (int i = 0; i < customLines - 1; i++)

                {

                    System.Web.UI.HtmlControls.HtmlGenericControl lineBreak = new System.Web.UI.HtmlControls.HtmlGenericControl("div");

                    container.Controls.Add(lineBreak);

                    System.Web.UI.HtmlControls.HtmlGenericControl customLine = new System.Web.UI.HtmlControls.HtmlGenericControl("span");

                    customLine.Style.Add("white-space", "nowrap");

                    customLine.DataBinding += customLine_DataBinding;

                    customLine.InnerText = i.ToString();

                    container.Controls.Add(customLine);

                }

            }

            void subject_DataBinding(object sender, EventArgs e)

            {

                System.Web.UI.HtmlControls.HtmlGenericControl customLine = (System.Web.UI.HtmlControls.HtmlGenericControl)sender;

                IDataItemContainer aptContainer = (IDataItemContainer)customLine.BindingContainer;

                //Access the appointment object and set its AllowEdit property:

                Telerik.Web.UI.SchedulerAppointmentContainer aptCont = (Telerik.Web.UI.SchedulerAppointmentContainer)customLine.Parent;

                Telerik.Web.UI.Appointment app = aptCont.Appointment;

                app.AllowEdit = false;

                string strSubject = (string)DataBinder.Eval(aptContainer.DataItem, "Subject");

                customLine.InnerText = strSubject;

            }

            void end_DataBinding(object sender, EventArgs e)

            {

                System.Web.UI.HtmlControls.HtmlGenericControl customLine = (System.Web.UI.HtmlControls.HtmlGenericControl)sender;

                IDataItemContainer aptContainer = (IDataItemContainer)customLine.BindingContainer;

                //Access the appointment object and set its AllowEdit property:

                Telerik.Web.UI.SchedulerAppointmentContainer aptCont = (Telerik.Web.UI.SchedulerAppointmentContainer)customLine.Parent;

                Telerik.Web.UI.Appointment app = aptCont.Appointment;

                app.AllowEdit = false;

                string strSubject = (string)DataBinder.Eval(aptContainer.DataItem, "scheduledend");

                customLine.InnerText = strSubject + " ";

            }

            void start_DataBinding(object sender, EventArgs e)

            {

                System.Web.UI.HtmlControls.HtmlGenericControl customLine = (System.Web.UI.HtmlControls.HtmlGenericControl)sender;

                IDataItemContainer aptContainer = (IDataItemContainer)customLine.BindingContainer;

                //Access the appointment object and set its AllowEdit property:

                Telerik.Web.UI.SchedulerAppointmentContainer aptCont = (Telerik.Web.UI.SchedulerAppointmentContainer)customLine.Parent;

                Telerik.Web.UI.Appointment app = aptCont.Appointment;

                app.AllowEdit = false;

                string strSubject = (string)DataBinder.Eval(aptContainer.DataItem, "scheduledstart");

                customLine.InnerText = strSubject;

            }

            private void customLine_DataBinding(object sender, EventArgs e)

            {

                System.Web.UI.HtmlControls.HtmlGenericControl customLine = (System.Web.UI.HtmlControls.HtmlGenericControl)sender;

                IDataItemContainer aptContainer = (IDataItemContainer)customLine.BindingContainer;

                //Access the appointment object and set its AllowEdit property:

                Telerik.Web.UI.SchedulerAppointmentContainer aptCont = (Telerik.Web.UI.SchedulerAppointmentContainer)customLine.Parent;

                Telerik.Web.UI.Appointment app = aptCont.Appointment;

                app.AllowEdit = false;

                int currentLine = Convert.ToInt32(customLine.InnerText);

                string strSubject = (string)DataBinder.Eval(aptContainer.DataItem, "additionalline" + currentLine.ToString());

                if (strSubject.Contains("[LINK]"))

                {

                    if (strSubject.IndexOf("[LINK]") + 6 == strSubject.Length)

                    {

                        customLine.InnerText = strSubject.Replace("[LINK]", "");

                        return;

                    }

                    strSubject = strSubject.Replace("[LINK]", "");

                    string[] links = strSubject.Split(new string[] { "|||" }, StringSplitOptions.RemoveEmptyEntries);

                    strSubject = string.Empty;

                    foreach (string link in links)

                    {

                        string[] values = link.Split(new string[] { "<|>" }, StringSplitOptions.RemoveEmptyEntries);

                        strSubject += "<a href=\"" + values[1] + "\"target=\"_blank\">" + values[0] + "</a>, ";

                    }

                    strSubject = strSubject.TrimEnd(", ".ToCharArray());

                    customLine.InnerHtml = strSubject;

                }

                else

                    customLine.InnerText = strSubject;

            }

        }

attached are two screenshots. one with compatibility mode enabled and one disabled.

timeline-compatibilitymodeON.JPG

timeline-compatibilitymodeOFF-howitshouldlook.JPG
Bozhidar
Admin

1192 posts

Posted 03 Apr 2013 Link to this post

Hello Christian,

This is a known issue and you can find a workaround that fixes it in the following help article:
http://www.telerik.com/help/aspnet-ajax/scheduler_troubleshootings_misalignments.html

Greetings,
Bozhidar
the Telerik team

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 their blog feed now.
christian

13 posts

Member since:
May 2009

Posted 29 Apr 2013 Link to this post

thanks for the answer. the article says, it is fixed in Q3 2012 release. I was having this issue with Q1 2013 release. I found a workaround of setting the RadScheduler.ColumnWidth to Unit.Percentage(100/numberOfDaysToShow)

Timeline looks weird in IE8-10 compatibility view

christian

Bozhidar

christian