Timeline looks weird in IE8-10 compatibility view

3 posts, 0 answers
  1. christian
    christian avatar
    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>
    <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. Bozhidar
    Admin
    Bozhidar avatar
    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.
  3. christian
    christian avatar
    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)
Back to Top