Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Timeline looks weird in IE8-10 compatibility view

2 Answers 65 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
christian
Top achievements
Rank 1
christian asked on 29 Mar 2013, 09:02 AM
timeline-compatibilitymodeON.JPG
timeline-compatibilitymodeOFF-howitshouldlook.JPG
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>
<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.

2 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 03 Apr 2013, 06:50 AM
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.
0
christian
Top achievements
Rank 1
answered on 29 Apr 2013, 12:38 PM
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)
Tags
Scheduler
Asked by
christian
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
christian
Top achievements
Rank 1
Share this question
or