[Solved] Incorrect display of items

[Mike]

Hi,

We've bought your software, but I'm having the following problem with the scheduler and would be grateful for your assistance.

I've created a version of your scheduler and unfortunately I can't get the items which have exactly the same date & time settings to be displayed side by side. One is always displayed under the other, with the second one, then being displayed against the wrong time. I am not entering the data through the form, but populating it dynamically from a datasource.

I read in your articles etc, it is the default behaviour for items with same date & time info to be displayed side by side and have even tried it via the data entry form on your site and it works, but I can't get it to work in my example.

I've copied the code for aspx, aspx.cs & stylesheets for your information below.

Regards
Mike

.aspx code

---

<%@ Page Language="C#" MasterPageFile="Site.Master" AutoEventWireup="true" CodeBehind="resultscalendar.aspx.cs" Inherits="CSEServelec.Rio.ResultsReporting.Web.resultscalendar" AspCompat="true" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content ID="contentMain" ContentPlaceHolderID="contentHolderMain" runat="server">
    <asp:UpdatePanel ID="inboxUpdatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="30"
            BackColor="#E0E0E0">
            <asp:Image ID="Image1" Style="margin-top: 200px" runat="server" ImageUrl="~/App_Themes/Default/resources/Loading.gif"
                BorderWidth="0px" AlternateText="Loading"></asp:Image>
                </telerik:RadAjaxLoadingPanel>
                <div id="outlookWrapper" style="height:95%; width: 100%; overflow-y: auto; overflow-x:hidden;">
                <h1><asp:Label runat="server" ID="patientsName"></asp:Label></h1>
                <div id="outlookLinkButton"><asp:LinkButton ID="lbChangeSlots" runat="server"
                        onclick="lbChangeSlots_Click">View by 15 min slots</asp:LinkButton></div>
                    <telerik:RadSplitter runat="server" ID="RadSplitter1" Height="535px" Width="576px" Skin="Web20" BorderSize="0">
                        <telerik:RadPane runat="server" ID="CalendarPane" MinWidth="200" Width="200px" CssClass="calendarPane">
                        <telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true"
                            DayNameFormat="FirstTwoLetters" EnableMonthYearFastNavigation="false"
                            EnableMultiSelect="false" EnableNavigation="true"
                            OnDefaultViewChanged="RadCalendar1_DefaultViewChanged"
                            OnSelectionChanged="RadCalendar1_SelectionChanged" ShowRowHeaders="false"
                            Skin="Office2007" Height="25%">
                            </telerik:RadCalendar>
                        <p></p>
                        <telerik:RadCalendar ID="RadCalendar2" runat="server" AutoPostBack="true"
                            DayNameFormat="FirstTwoLetters" EnableMonthYearFastNavigation="false"
                            EnableMultiSelect="false" EnableNavigation="false"
                            OnSelectionChanged="RadCalendar2_SelectionChanged" ShowRowHeaders="false"
                            Skin="Office2007">
                        </telerik:RadCalendar><p></p>
                        <telerik:RadCalendar ID="RadCalendar3" runat="server" AutoPostBack="true"
                            DayNameFormat="FirstTwoLetters" EnableMonthYearFastNavigation="false"
                            EnableMultiSelect="false" EnableNavigation="false"
                            OnSelectionChanged="RadCalendar3_SelectionChanged" ShowRowHeaders="false"
                            Skin="Office2007">
                            </telerik:RadCalendar>
                        <p></p></telerik:RadPane>
                <telerik:RadSplitBar runat="server" id="RadSplitBar1" BorderWidth="0" />
                    <telerik:RadPane runat="server" ID="SchedulerPane" CssClass="schedulerPane" MinWidth="554" Width="554px">
                        <telerik:RadScheduler ID="RadScheduler1" runat="server" AllowDelete="False"
                                AllowEdit="false" DataEndField="ObsEndDate" DataKeyField="MessageID"
                                DataSourceID="GetCalendarViewDataSource" DataStartField="ObservationDate"
                                DataSubjectField="TextDescription" EnableEmbeddedSkins="True" Height="557px"
                                MinutesPerRow="60" OnAppointmentClick="RadScheduler1_AppointmentClick"
                                OnNavigationComplete="RadScheduler1_NavigationComplete"
                                OnAppointmentCreated="RadScheduler1_AppointmentCreated"
                                OverflowBehavior="Scroll" ReadOnly="true" SelectedView="DayView"
                                ShowAllDayRow="false" Skin="Office2007" StartInFullTime="true"
                                TimeLabelRowSpan="1" TimeZoneOffset="00:00:00" WorkDayEndTime="18:00:00"
                                WorkDayStartTime="08:00:00" FirstDayOfWeek="Monday" LastDayOfWeek="Sunday" GroupBy="ObservationDate">
                         </telerik:RadScheduler>
                     </telerik:RadPane>
                 </telerik:RadSplitter>
                </div>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:ObjectDataSource ID="GetCalendarViewDataSource" runat="server"
        SelectMethod="GetCalendarResult"
        TypeName="CSEServelec.Rio.ResultsReporting.ResultsFacade.CalendarViewFacade">
        <SelectParameters>
            <asp:parameter DefaultValue="" Name="ClientID" Type="String" />
            <asp:parameter DefaultValue="" Name="fromDate" Type="DateTime" />
            <asp:parameter DefaultValue="" Name="toDate" Type="DateTime" />
        </SelectParameters>
    </asp:ObjectDataSource>
</asp:Content>

aspx.cs

---

using System;
using System.Collections;
using System.Data.OleDb;
using System.ComponentModel;
using System.Data;
//using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
using Telerik.Web.UI.Calendar;
using Telerik.Web.UI.Scheduler;
using System.Globalization;
using System.Text;

namespace CSEServelec.Rio.ResultsReporting.Web
{
    /// <summary>
    /// Results Calendar, to display the Order description, colour coded
    /// dependant on results being within normal range (green), or any
    /// results outside of normal range (red). When the result is clicked
    /// on the user is taken to the Detailed Results page.
    /// </summary>
    public partial class resultscalendar : ContentPageBase
    {

        public resultscalendar() : base("Results Calendar") { }

        //Declare the ScriptManger so we can reference throughout the class
        ScriptManager SM;


        /// <summary>
        /// Gets reference to script manager for current page and register
        /// triggers (controls which will refresh the update panel). Set up
        /// custom attribute for scheduler so the Abnormal flag can be
        /// referenced.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Page_Load(object sender, System.EventArgs e)
        {
            // Get this page's instance of ScriptManager and register triggers
            // for update panel.
            SM = ScriptManager.GetCurrent(Page);
            SM.RegisterAsyncPostBackControl(lbChangeSlots);

            // Set up reference for custom attribute 'abnormal flag' for later use.
            RadScheduler1.CustomAttributeNames = new string[] { "Abnormal" };

            if (!IsPostBack)
            {
                // Set culture to english (GB), and set calendars Culture Info to same.
                CultureInfo CInfo = new CultureInfo("en-GB", true);
                RadCalendar1.CultureInfo = CInfo;
                RadCalendar2.CultureInfo = CInfo;
                RadCalendar3.CultureInfo = CInfo;
                RadScheduler1.Culture = CInfo;

                // Hide SideBanner & KeyArea from Master Page
                MasterPage.SideBanner.Visible = false;
                MasterPage.KeyArea.Visible = false;
                MasterPage.FooterArea.Visible = false;

                // Set Calendar1 to today's date.
                RadCalendar1.FocusedDate = DateTime.Parse(DateTime.Now.ToShortDateString());
                SyncCalendars();

                // ClientID number querystring present?
                if (Request.QueryString["ClientID"] != null)
                {
                    // Store ClientID in local variable and set parameter for scheduler sproc
                    string clientID = Request.QueryString["ClientID"].ToString();
                    GetCalendarViewDataSource.SelectParameters["ClientID"].DefaultValue = clientID;

                    // Call sproc to get patient's name and set patient's name
                    ResultsFacade.CalendarViewFacade cvf = new CSEServelec.Rio.ResultsReporting.ResultsFacade.CalendarViewFacade();
                    patientsName.Text = cvf.GetCalendarResultName(clientID);
                }
                else
                {
                    patientsName.Text = "&nbsp;";
                }

                // Set parameters for sproc which brings back Order information
                GetCalendarViewDataSource.SelectParameters["fromDate"].DefaultValue = BuildDateString(DateTime.Now.ToShortDateString(), "from");
                GetCalendarViewDataSource.SelectParameters["toDate"].DefaultValue = BuildDateString(DateTime.Now.ToShortDateString(), "to");

                //ViewState["lbcSlots"] = true;
            }
        }


        /// <summary>
        /// This is where the colour coding is set for an Order, based on the value of the
        /// abnormal flag, which is coded here as an appointment attribute.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void RadScheduler1_AppointmentCreated(object sender, SchedulerEventArgs e)
        {
            if(int.Parse(e.Appointment.Attributes["Abnormal"].ToString()) == 0)
            {
                e.Appointment.CssClass = "NormalStyle";
            }
            else
            {
                e.Appointment.CssClass = "AbnormalStyle";
            }
        }

        /// <summary>
        /// Synchronising the rest of the Calendars with the to main calendar's selected date.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void RadScheduler1_NavigationComplete(object sender, SchedulerNavigationCompleteEventArgs e)
        {
            UpdateScheduler(1);
        }

        /// <summary>
        /// Synchronise the rest of the calendars when calendar one date changes.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void RadCalendar1_DefaultViewChanged(object sender, DefaultViewChangedEventArgs e)
        {
            SyncCalendars();
        }

        /// <summary>
        /// Calendars 2 and 3 synchronised with Calendar one values.
        /// </summary>
        private void SyncCalendars()
        {
            RadCalendar2.FocusedDate = RadCalendar1.FocusedDate.AddMonths(1);
            RadCalendar3.FocusedDate = RadCalendar1.FocusedDate.AddMonths(2);
        }

        /// <summary>
        /// When Calendar 1 selected date changed, Change date in Scheduler
        /// and related calendars to synchronise.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void RadCalendar1_SelectionChanged(object sender, SelectedDatesEventArgs e)
        {
            if (RadCalendar1.SelectedDates.Count > 0)
            {
                RadScheduler1.SelectedDate = RadCalendar1.SelectedDate;
                RadCalendar2.SelectedDate = RadCalendar1.SelectedDate;
                RadCalendar3.SelectedDate = RadCalendar1.SelectedDate;

                UpdateScheduler(1);
            }
        }

        /// <summary>
        /// If Calendar 2 date changed then synchronise scheduler and other
        /// calendars with selection.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void RadCalendar2_SelectionChanged(object sender, SelectedDatesEventArgs e)
        {
            if (RadCalendar2.SelectedDates.Count > 0)
            {
                RadScheduler1.SelectedDate = RadCalendar2.SelectedDate;
                RadCalendar1.SelectedDate = RadCalendar2.SelectedDate;
                RadCalendar3.SelectedDate = RadCalendar2.SelectedDate;

                UpdateScheduler(2);
            }
        }

        /// <summary>
        /// If Calendar 3 date changed then synchronise scheduler and other
        /// calendars with selection.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void RadCalendar3_SelectionChanged(object sender, SelectedDatesEventArgs e)
        {
            if (RadCalendar3.SelectedDates.Count > 0)
            {
                RadScheduler1.SelectedDate = RadCalendar3.SelectedDate;
                RadCalendar1.SelectedDate = RadCalendar3.SelectedDate;
                RadCalendar2.SelectedDate = RadCalendar3.SelectedDate;

                UpdateScheduler(3);
            }
        }

        /// <summary>
        /// Enhance date string to include time for searching on date / time
        /// range within proc.
        /// </summary>
        /// <param name="dtIn"></param>
        /// <param name="type"></param>
        /// <returns></returns>
        private string BuildDateString(string dtIn, string type)
        {
            DateTime dtInternal = new DateTime();
            DateTime dtConvertTo = new DateTime();
            dtInternal = DateTime.Parse(dtIn);
            if (type == "from")
            {
                dtConvertTo = dtInternal.Add(new TimeSpan(00, 00, 00));
            }
            else
            {
                dtConvertTo = dtInternal.Add(new TimeSpan(23, 59, 59));
            }

            return dtConvertTo.ToString();
        }

        /// <summary>
        /// When link clicked on user taken to Detailed Results screen.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void RadScheduler1_AppointmentClick(object sender, SchedulerEventArgs e)
        {
            Response.Redirect("detailsresults.aspx?MsgID=" + e.Appointment.ID + "&ClientID=" + Request.QueryString["ClientID"].ToString());
        }


        /// <summary>
        /// When clicked change view to either 15 minute or 60 minute views
        /// and change link text appropriately.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void lbChangeSlots_Click(object sender, EventArgs e)
        {
            if (RadScheduler1.SelectedView != SchedulerViewType.MonthView)
            {
                if (RadScheduler1.MinutesPerRow == 15)
                {
                    RadScheduler1.MinutesPerRow = 60;
                    RadScheduler1.TimeLabelRowSpan = 1;
                    lbChangeSlots.Text = "View by 15 min slots";
                }
                else
                {
                    RadScheduler1.MinutesPerRow = 15;
                    RadScheduler1.TimeLabelRowSpan = 4;
                    lbChangeSlots.Text = "View by 60 min slots";
                }

                // Update ajax panel
                inboxUpdatePanel.Update();
            }
            else
            {
                // Put code here for message box etc...

            }

        }


        private void GetWeekRange(System.DateTime dateIn, ref System.DateTime stDate, ref System.DateTime endDate)
        {
            double offset = 0;
            switch (dateIn.DayOfWeek)
            {
                case DayOfWeek.Monday:
                    offset = 0;
                    break;
                case DayOfWeek.Tuesday:
                    offset = -1;
                    break;
                case DayOfWeek.Wednesday:
                    offset = -2;
                    break;
                case DayOfWeek.Thursday:
                    offset = -3;
                    break;
                case DayOfWeek.Friday:
                    offset = -4;
                    break;
                case DayOfWeek.Saturday:
                    offset = -5;
                    break;
                case DayOfWeek.Sunday:
                    offset = -6;
                    break;
            }
            stDate = dateIn.AddDays(offset);
            endDate = stDate.AddDays(6);
        }


        private void UpdateScheduler(int calNum)
        {
            DateTime startDate = new DateTime();
            DateTime endDate = new DateTime();
            DateTime inDate = new DateTime();

            switch (calNum)
            {
                case 1:
                    {
                        if (RadScheduler1.SelectedDate.Year.Equals(0001))
                        {
                            RadScheduler1.SelectedDate = RadCalendar1.FocusedDate;
                        }
                        else
                        {
                            RadCalendar1.FocusedDate = RadScheduler1.SelectedDate;
                        }
                        inDate = RadCalendar1.FocusedDate;
                        break;
                    }
                case 2:
                    {
                        if (RadScheduler1.SelectedDate.Year.Equals(0001))
                        {
                            RadScheduler1.SelectedDate = RadCalendar2.FocusedDate;
                        }
                        else
                        {
                            RadCalendar2.FocusedDate = RadScheduler1.SelectedDate;
                        }
                        inDate = RadCalendar2.FocusedDate;
                        break;
                    }
                case 3:
                    {
                        if (RadScheduler1.SelectedDate.Year.Equals(0001))
                        {
                            RadScheduler1.SelectedDate = RadCalendar3.FocusedDate;
                        }
                        else
                        {
                            RadCalendar3.FocusedDate = RadScheduler1.SelectedDate;
                        }
                        inDate = RadCalendar3.FocusedDate;
                        break;
                    }
                default:
                    {
                        break;
                    }
            }

            SyncCalendars();

            switch (RadScheduler1.SelectedView)
            {
                case SchedulerViewType.DayView:
                    {
                        startDate = inDate;
                        endDate = inDate;
                        break;
                    }
                case SchedulerViewType.WeekView:
                    {
                        GetWeekRange(inDate, ref startDate, ref endDate);
                        break;
                    }
                case SchedulerViewType.MonthView:
                    {
                        //lbChangeSlots.Visible = false;
                        int daysMonth;
                        daysMonth = DateTime.DaysInMonth(inDate.Year, inDate.Month);
                        StringBuilder sbDate = new StringBuilder();
                        sbDate.Append("01/");
                        sbDate.Append(inDate.Month);
                        sbDate.Append("/");
                        sbDate.Append(inDate.Year);
                        startDate = System.DateTime.Parse(sbDate.ToString());
                        sbDate.Remove(0, sbDate.Length);

                        sbDate.Append(daysMonth);
                        sbDate.Append("/");
                        sbDate.Append(inDate.Month);
                        sbDate.Append("/");
                        sbDate.Append(inDate.Year);
                        endDate = System.DateTime.Parse(sbDate.ToString());
                        break;
                    }
                default:
                    {
                        break;
                    }
            }

            // ClientID querystring present?
            if (Request.QueryString["ClientID"] != null)
            {
                GetCalendarViewDataSource.SelectParameters["ClientID"].DefaultValue = Request.QueryString["ClientID"].ToString();
            }
            GetCalendarViewDataSource.SelectParameters["fromDate"].DefaultValue = BuildDateString(startDate.ToShortDateString(), "from");
            GetCalendarViewDataSource.SelectParameters["toDate"].DefaultValue = BuildDateString(endDate.ToShortDateString(), "to");
        }
    }
}

---

stylesheet

---

    .schedulerPane
    {
        position:relative;
    }

    #outlookWrapper
    {
        background: transparent url("resources/background.png") no-repeat top left;
        width: 779px;
        position: relative;
        height: 626px;
    }

    #outlookWrapper h1
    {
        font: bold 14px SegoeUI, Arial, sans-serif;
        padding: 13px 0 16px 16px;
        margin: 0;
        color: #15428b;
        position: relative;
    }

    #outlookLinkButton
    {
        font: bold 14px SegoeUI, Arial, sans-serif;
        position: relative;
        top: 555px;
        left: 425px;
        visibility: visible;
    }

    .rsApt.AbnormalStyle .rsAptInner
   {
       background-color: red;
   }
   .rsApt.NormalStyle .rsAptInner
   {
       background-color: green;
   }

    #RadSplitter1
    {
        width: 767px;
        height: 587px;
        position: relative;
        top: 33px;
        left: 6px;
        border: 0;
    }

    #RadSplitter1 .pane
    {
        border: 0;
    }

    #RadSplitter1 .resizeBar,
    #RadSplitter1 .resizeBarOver
    {
        border: 0;
    }

    .calendarPane
    {
        text-align: center;
        padding: 28px 0 0 10px;
        padding-top: 25px;
    }

    .calendarPane p
    {
        margin: 0;
        padding: 0 0 10px 0;
    }

    * html .calendarPane p
    {
        padding-bottom: 5px;
    }

    *+html .calendarPane p
    {
        padding-bottom: 5px;
    }

    .calendarPane a
    {
        line-height: 10px !important;
        font-size: 10px;
    }

    .calendarPane .DaysOfWeek_Office2007
    {
        text-transform: capitalize;
        font-size: 10px;
        font-weight: normal;
    }

    .calendarPane #RadCalendar3_Title
    {
        height: 16px;
    }
    .rsHeader {background-color:#fff}

    /*******************************************/
    /*** the styles below adjust the entries ***/
    /*** to be displayed fully               ***/
    /*******************************************/

    .rsApt
    {
        position: static !important;
    }

    .rsAptContent
    {
        font-size: xx-small !important;
        line-height: normal !important;
        overflow: visible !important;
        padding: 2px;
    }

    .rsAptContent UL, .rsAptContent UL LI
    {
        margin: 0px, 0px, 0px, 10px;
        line-height: normal;
        list-style: bullet;
    }

    .rsMonthView .rsWrap
    {
        overflow: visible !important;
        height: auto !important;
    }

    .RadScheduler_Default .rsMonthView .rsDateWrap
    {
        height: 20px !important;
    }


    .RadScheduler_Default .rsMonthView td.rsCell
    {
        height: 150px !important;
    }


    .rsAptContent
    {
        font-size: xx-small !important;
        line-height: normal !important;
    }


    .rsMonthView .rsWrap
    {

    }

    .RadScheduler_Default .rsMonthView td.rsCell
    {
        height: 150px;
    }

Thanks.

[Peter]

Hi Mike,

By default, the .rsApt is with position: absolute. You overwrite this class with position: static, which causes the problem.  Commenting this rule will fix the problem. 

.rsApt
    {
      /*position: static !important;*/
    }

We are not sure why you need the above rule. If it has to be there for a specific reason, please explain what exactly it is need for and we will try to find a workaround.


All the best,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center