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

First steps with RadScheduler (first issues)

7 Answers 284 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Eugenio
Top achievements
Rank 1
Eugenio asked on 23 Jun 2012, 02:17 PM
Hello,
I'm trying to move my first steps with RadScheduler, but probably I'm missing something obvious since I really can't get it to work as expected.
I have some questions, which should be easy to answer:

  • DayStartTime and DayEndTime should tell the control the first and last hour to display right?

I've tried setting it in designer, aspx code, code behind but none of them seems to work since it still displays from 00:00 to 24:00.
No problem with WorkDayStartTime and WorkDayEndTime they seems to work properly.
Am I doing something wrong? This is the latest configuration in code behind:

            RadScheduler1.DayStartTime = new TimeSpan(8, 0, 0);
            RadScheduler1.DayEndTime = new TimeSpan(20, 0, 0);

EDIT: Resolved, I had the showfulltime option conflicting with the above settings  

  • Works in IE8, not the same in Chrome

I'm trying to achieve some sort of full screen agenda, 100% width and everything runs fine in IE, but when in Chrome the scheduler doesn't want to stretch to 100% width even if it's div container does and radscheduler's width property is set to 100%. Furthermore the vertical scrollbar is disabled until I resize the Chrome window.

EDIT: Could you provide a working layout with fixed header on top of the page, fixed footer on bottom of the page, and the scheduler filling the central part adapting to any window resize? I've tried my best, but still can't find a way out.

  • Appointment background

I'm using the very appreciated metro skin, but when changing the colors by means of:

<telerik:ResourceStyleMapping Type="User" Key="1" Text="Resource 1" ApplyCssClass="rsCategoryBlue" />

it only applies to top border, while in the example screenshots I see the full appoinment box with a nice green backround. Should I go with some more complicated setting for the background?

EDIT: Resolved, I modified the appointment template to reflect my background color needs  


  • I tried starting from scratch with the Scheduler / Binding to Generic List example

Everything works as expected after copying the example code except the refresh that on my side keeps giving a postback instead of the cute busy indicator. What am I missing? Could you isolate the example so that I can reproduce it?


Best regards

7 Answers, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 27 Jun 2012, 12:05 PM
Hello Eugenio,

Regarding your last edit about the busy indicator, this is a feature of RadAjaxManager so please make sure you have the following code in your page:
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
       <AjaxSettings>
           <telerik:AjaxSetting AjaxControlID="RadScheduler1">
               <UpdatedControls>
                   <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
               </UpdatedControls>
           </telerik:AjaxSetting>
       </AjaxSettings>
   </telerik:RadAjaxManager>
   <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

As for the other issues, can you confirm that you have manage to resolve them or is there still anything pending?


Greetings, Peter
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
Eugenio
Top achievements
Rank 1
answered on 27 Jun 2012, 12:24 PM
Hello Peter,
thanks for the answer.
First of all as for the sentence:

>As for the other issues, can you confirm that you have manage to resolve them or is there still anything pending? 

I'm still facing all the issues mentioned, I was looking for other stuff in the meanwhile. I guess my problem is somewhere in the configuration of the project or in web.config since there are too many issues to be only a coding error.
I would appreciate if you could upload a simple working project so I can start studying from it.

About the RadAjaxManager, I double checked the code and the code looks right to me.
I'm posting it for reference:

<%@ Page Language="C#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Scheduler.BindToList.DefaultCS"
    CodeFile="DefaultCS.aspx.cs" %>
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<head id="Head1" runat="server">
</head>
<body class="BODY">
    <form id="Form1" method="post" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadScheduler1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
    <div class="exampleContainer">
        <telerik:RadScheduler runat="server" ID="RadScheduler1" Width="750px" TimeZoneOffset="03:00:00"
            OnAppointmentInsert="RadScheduler1_AppointmentInsert" OnAppointmentUpdate="RadScheduler1_AppointmentUpdate"
            OnAppointmentDelete="RadScheduler1_AppointmentDelete" DataKeyField="ID" DataSubjectField="Subject"
            DataStartField="Start" DataEndField="End" DataRecurrenceField="RecurrenceRule"
            DataRecurrenceParentKeyField="RecurrenceParentId" DataReminderField="Reminder">
            <AdvancedForm Modal="true" />
            <TimelineView UserSelectable="false" />
            <TimeSlotContextMenuSettings EnableDefault="true" />
            <AppointmentContextMenuSettings EnableDefault="true" />
            <Reminders Enabled="true" />
        </telerik:RadScheduler>
    </div>
    </form>
</body>
</html>


using System;
using System.Collections.Generic;
 
using Telerik.Web.UI;
 
namespace Telerik.Web.Examples.Scheduler.BindToList
{
     
 
    public partial class DefaultCS : System.Web.UI.Page
    {
        private const string AppointmentsKey = "Telerik.Web.Examples.Scheduler.BindToList.CS.Apts";
 
        private List<AppointmentInfo> Appointments
        {
            get
            {
                List<AppointmentInfo> sessApts = Session[AppointmentsKey] as List<AppointmentInfo>;
                if (sessApts == null)
                {
                    sessApts = new List<AppointmentInfo>();
                    Session[AppointmentsKey] = sessApts;
                }
 
                return sessApts;
            }
        }
 
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
 
            if (!IsPostBack)
            {
                Session.Remove(AppointmentsKey);
 
                InitializeResources();
                InitializeAppointments();
            }
 
            RadScheduler1.DataSource = Appointments;
        }
 
        protected void RadScheduler1_AppointmentInsert(object sender, SchedulerCancelEventArgs e)
        {
            Appointments.Add(new AppointmentInfo(e.Appointment));
        }
 
        protected void RadScheduler1_AppointmentUpdate(object sender, AppointmentUpdateEventArgs e)
        {
            AppointmentInfo ai = FindById(e.ModifiedAppointment.ID);
            ai.CopyInfo(e.ModifiedAppointment);
        }
 
        protected void RadScheduler1_AppointmentDelete(object sender, SchedulerCancelEventArgs e)
        {
            Appointments.Remove(FindById(e.Appointment.ID));
        }
 
        private void InitializeResources()
        {
            ResourceType resType = new ResourceType("User");
            resType.ForeignKeyField = "UserID";
 
            RadScheduler1.ResourceTypes.Add(resType);
            RadScheduler1.Resources.Add(new Resource("User", 1, "Alex"));
            RadScheduler1.Resources.Add(new Resource("User", 2, "Bob"));
            RadScheduler1.Resources.Add(new Resource("User", 3, "Charlie"));
        }
 
        private void InitializeAppointments()
        {
            DateTime start = DateTime.UtcNow.Date;
            start = start.AddHours(6);
            Appointments.Add(new AppointmentInfo("Take the car to the service", start, start.AddHours(1), string.Empty, null, new Reminder(30).ToString(), 1));
            Appointments.Add(new AppointmentInfo("Meeting with Alex", start.AddHours(2), start.AddHours(3), string.Empty, null, string.Empty, 2));
 
            start = start.AddDays(-1);
            DateTime dayStart = RadScheduler1.UtcDayStart(start);
            Appointments.Add(new AppointmentInfo("Bob's Birthday", dayStart, dayStart.AddDays(1), string.Empty, null, string.Empty, 1));
            Appointments.Add(new AppointmentInfo("Call Charlie about the Project", start.AddHours(2), start.AddHours(3), string.Empty, null, string.Empty, 2));
 
            start = start.AddDays(2);
            Appointments.Add(new AppointmentInfo("Get the car from the service", start.AddHours(2), start.AddHours(3), string.Empty, null, string.Empty, 1));
        }
 
        private AppointmentInfo FindById(object ID)
        {
            foreach (AppointmentInfo ai in Appointments)
            {
                if (ai.ID.Equals(ID))
                {
                    return ai;
                }
            }
 
            return null;
        }
 
        class AppointmentInfo
        {
            private readonly string _id;
            private string _subject;
            private DateTime _start;
            private DateTime _end;
            private string _recurrenceRule;
            private string _recurrenceParentId;
            private string _reminder;
            private int? _userID;
 
            public string ID
            {
                get { return _id; }
            }
 
            public string Subject
            {
                get { return _subject; }
                set { _subject = value; }
            }
 
            public DateTime Start
            {
                get { return _start; }
                set { _start = value; }
            }
 
            public DateTime End
            {
                get { return _end; }
                set { _end = value; }
            }
 
            public string RecurrenceRule
            {
                get { return _recurrenceRule; }
                set { _recurrenceRule = value; }
            }
 
            public string RecurrenceParentID
            {
                get { return _recurrenceParentId; }
                set { _recurrenceParentId = value; }
            }
 
            public int? UserID
            {
                get { return _userID; }
                set { _userID = value; }
            }
 
            public string Reminder
            {
                get { return _reminder; }
                set { _reminder = value; }
            }
 
            private AppointmentInfo()
            {
                _id = Guid.NewGuid().ToString();
            }
 
            public AppointmentInfo(string subject, DateTime start, DateTime end,
                string recurrenceRule, string recurrenceParentID, string reminder, int? userID)
                : this()
            {
                _subject = subject;
                _start = start;
                _end = end;
                _recurrenceRule = recurrenceRule;
                _recurrenceParentId = recurrenceParentID;
                _reminder = reminder;
                _userID = userID;
            }
 
            public AppointmentInfo(Appointment source)
                : this()
            {
                CopyInfo(source);
            }
 
            public void CopyInfo(Appointment source)
            {
                Subject = source.Subject;
                Start = source.Start;
                End = source.End;
                RecurrenceRule = source.RecurrenceRule;
                if (source.RecurrenceParentID != null)
                {
                    RecurrenceParentID = source.RecurrenceParentID.ToString();
                }
 
                if (!String.IsNullOrEmpty(Reminder))
                {
                    Reminder = source.Reminders[0].ToString();
                }
 
                Resource user = source.Resources.GetResourceByType("User");
                if (user != null)
                {
                    UserID = (int?)user.Key;
                }
                else
                {
                    UserID = null;
                }
            }
        }
    }
}
0
Peter
Telerik team
answered on 02 Jul 2012, 11:05 AM
SchedulerBindToList.zip
Hello Eugenio,

Indeed, there is a peculiarity with RadAjaxLoadingPanel - the Skin property has to be set explicitly for the loading image to appear -
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
       <AjaxSettings>
           <telerik:AjaxSetting AjaxControlID="RadScheduler1">
               <UpdatedControls>
                   <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
               </UpdatedControls>
           </telerik:AjaxSetting>
       </AjaxSettings>
   </telerik:RadAjaxManager>
   <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" />

The online demo works without this setting, because RadSkinManager is used. More details on the matter you can find in this help topic -

RadAjaxLoadingPanel supports skinning and you can change its skin by setting the Skin property to the name of the respective skin. The default value of the Skin property is "" (no skin).

If the Skin property is set, transparency is applied by default from the skin. However you can change this behavior by setting EnableSkinTransparency="false".

Also, I discovered a glitch with the reminders. To correct the problem, please modify the code like this:
public void CopyInfo(Appointment source)
       {
 
           Subject = source.Subject;
 
           Start = source.Start;
 
           End = source.End;
 
           RecurrenceRule = source.RecurrenceRule;
 
           if (source.RecurrenceParentID != null)
           {
 
               RecurrenceParentID = source.RecurrenceParentID.ToString();
 
           }
 
 
           if (source.Reminders.Count != 0)
           {
 
               Reminder = source.Reminders[0].ToString();
 
           }
           else
           {
               Reminder = String.Empty;
           }
 
 
 
           Resource user = source.Resources.GetResourceByType("User");
 
           if (user != null)
           {
 
               UserID = (int?)user.Key;
 
           }
 
           else
           {
 
               UserID = null;
 
           }
 
       }

Also, you can use BackColor to style appointments per resource:
<ResourceStyles>
           <telerik:ResourceStyleMapping Type="User" Text="Alex" BackColor="Aqua" />
           <telerik:ResourceStyleMapping Type="User" Text="Bob" BackColor="Coral" />
           <telerik:ResourceStyleMapping Type="User" Text="Charlie" BackColor="Gold" />
       </ResourceStyles>

If the Width property is not set, it will default to 100%. In this case, RadScheduler stretches as expected in all supported browsers, including Chrome and IE9.

Finally, you can control vertical scrolling with the OverflowBehavior property ("Scroll" is the default value, "Expand" is the other possible value).

Attached is a sample for reference.

Greetings,
Peter
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
Eugenio
Top achievements
Rank 1
answered on 05 Jul 2012, 08:22 AM
Indeed setting the skin definitely fixed all the busy indicator issues :)

Ok last issue left:

  • Could you provide a working layout with fixed header on top of the page, fixed footer on bottom of the page, and the scheduler filling the central part adapting to any window resize? I've tried my best, but still can't find a way out.

This one is driving me mad, but each solution I try has drawbacks. Working with CSS doesn't allow for a fixed size, resizing the container with jQuery works in some browsers but not in others.
I thought having a full screen agenda was a common request, but I don't seem to be able to find related topics.

Best regards
0
Peter
Telerik team
answered on 05 Jul 2012, 01:03 PM
Hello Eugenio,

I am afraid that this requirement will be difficult to achieve with RadScheduler and I don't have ideas how to proceed.

Kind regards,
Peter
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
Eugenio
Top achievements
Rank 1
answered on 05 Jul 2012, 03:04 PM
Capture.PNG
I spent some more time on the matter, this is the best I could achieve with a little help of jQuery (markup only, code behind doesn't change).
Works in IE8 and Chrome at the moment.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Layout.aspx.cs" Inherits="Prime.Layout" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
<head runat="server">
    <title>Layout</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            margin: 0;
        }
         
        div#header
        {
            background: red;
            position: fixed;
            top: 0;
            left: 0;
            height: 100px;
            width: 100%;
        }
         
        div#content
        {
            background: yellow;
            margin-top: 100px;
            width: 100%;
        }
         
        div#footer
        {
            background: green;
            position: fixed;
            bottom: 0;
            left: 0;
            height: 100px;
            width: 100%;
        }
         
        img
        {
            border: 1px solid purple;
        }
    </style>
    <script type="text/javascript">
 
    </script>
    <telerik:radcodeblock id="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            setContentHeight();
 
            $(window).resize(function () {
                resizeContent();
            });
        });
 
        function pageLoad() {
            refreshScheduler();
        }
 
        function setContentHeight() {
            $('#content').css('height', $(window).height() - $('#header').height() - $('#footer').height());
            //alert($('#content').css('height'));
        }
 
        function resizeContent() {
            setContentHeight();
 
            refreshScheduler();
        }
         
        function refreshScheduler() {
            var scheduler = $find('<%=RadScheduler1.ClientID %>');
            //alert(scheduler.get_id() + " " + $('#content').css('height'));
            scheduler.get_element().style.height = $('#content').css('height');
            scheduler.repaint();
        }
    </script>
</telerik:radcodeblock>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:radscriptmanager runat="server" id="RadScriptManager1" />
    <telerik:radajaxmanager id="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadScheduler1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:radajaxmanager>
    <telerik:radajaxloadingpanel id="RadAjaxLoadingPanel1" runat="server" skin="Default" />
    <div id="header">
        Header</div>
    <div id="content">
        <telerik:radscheduler runat="server" id="RadScheduler1" daystarttime="07:00:00" dayendtime="22:00:00"
            timezoneoffset="03:00:00" onappointmentinsert="RadScheduler1_AppointmentInsert"
            onappointmentupdate="RadScheduler1_AppointmentUpdate" onappointmentdelete="RadScheduler1_AppointmentDelete"
            datakeyfield="ID" datasubjectfield="Subject" datastartfield="Start" dataendfield="End"
            datarecurrencefield="RecurrenceRule" datarecurrenceparentkeyfield="RecurrenceParentId"
            datareminderfield="Reminder" showfulltime="false" showfooter="false" width="100%">
            <AdvancedForm Modal="true" />
            <TimelineView UserSelectable="false" />
            <TimeSlotContextMenuSettings EnableDefault="true" />
            <AppointmentContextMenuSettings EnableDefault="true" />
            <Reminders Enabled="true" />
        </telerik:radscheduler>
    </div>
    <div id="footer">
        Footer</div>
    </form>
</body>
</html>
0
Peter
Telerik team
answered on 09 Jul 2012, 09:51 AM
Hi Eugenio,

Thank you for sharing your workaround in the forum.

Regards,
Peter
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.
Tags
Scheduler
Asked by
Eugenio
Top achievements
Rank 1
Answers by
Peter
Telerik team
Eugenio
Top achievements
Rank 1
Share this question
or