How to use Telerik Scheduler to Display Appointments in Asp.net Part I

Introduction  

Maybe now you have accepted the fact that controls you see in your toolbox or the controls that are shipped with visual Studio does not have functionalities that you might want to have on your web application or Silverlight application. One needs to consider or accept the fact that the days of Classic asp or bad coding ways are over, and one needs to accept that there are people out there who dedicated their time to fill your toolbox with controls that can do what you wanted to do.  Me and Sheo agreed that we are going to teach our visitors that sometimes you do not need to invent the wheel, in fact some other wheels are not possible with normal Microsoft controls. There are Companies like www.telerik.com , www.Infragistics.com , www.DevExpress.com  who dedicated their time to make this possible at a certain fee. I will be writing articles on these nice controls and how to use them. The Last Control I used was the Scheduler provided by Telerik.

Background

I used a Scheduler for some time now, I have created a fully functionally systems that schedule students Timetable,Leave System, Time Management Systems, This was nice , because i was a stand alone programmer until Last month 1 November 2010, so being a stand alone developer is fun because you easily explore technologies and you adapt to new technologies quickly and you know or do important things with that technology. In this article I will demonstrate to you on how to use Telerik Scheduler to create an appointment based Small application in asp.net. I will try to write a Silverlight examples after this series of Example. In this example i used a Dataset , that you will never find in Silverlight, to make things easier for you, i have written a Converter, so it means you can pass a dataset to your layers and my Converter will convert it to a nice objects that can be binded to any silverlight controls that is capable of handling data

Using the code

 We are going to use C# as our Language

Start

 The First thing that you will need to do, is to register at Telerik’s website as a user by following this link 

http://www.telerik.com/registration-login/registration.aspx?target=%2f

 Have is Telerik Controls that can be downloaded here

http://www.telerik.com/account/your-products/trial-product-versions/download-trial-file.aspx?fileid=11012&pid=0&dispkey=True

This is not a 5 minutes Download. When done with the download, close any Visual studio window opened and installs the controls. When done open your Visual studio and they will be automatically registered in your visual studio toolbox.

How to use them

When you open your visual studio, you will notice a green section in your toolbar as depicted below

There are more of the Controls, due to the image size; I can’t display all of them. Telerik and Infragistics are the leaders in this industry, before it was Infragistics, but Telerik has taken over the market. The controls we want to use are called the “RadSchedular”
The Scheduler is used to display appointments like in Microsoft outlook. You can create an appointment on it; you can move appointment to another date or time and all the other things. In this part 1 of 4 Series I try to cover all the functionality of these controls. The First part of these Serials is the data that needs to be presented in the Scheduler. I am not going to get complicated with the Data now, we will change the Structure as we move on to other Parts of the series.

When I first use this control, it was easy because I know exactly what I wanted to do; I knew what Data I needed to display. The scheduler is an appointment control, well in an appointment, you will need the StartTime and Date, the Endtime and Date, and the last one will be the Appointment. I will only present to you that simple kind of appointment for now.

Data Structure

The Data Structure is simple for now, no recurrence data is included or any other functionalities that we will discuss in the next parts of the series.

Our table that will store the appointments is defied like this

Create Table tblAppointment
(
Appointment_Id  int identity(100,01)primary key not null,
Appoitment_Descr varchar(max) not null,
StartDate DateTime not null,
EndDate DateTime not null,
)

Our stored procedure to store, edit, retrieve and delete appointments are defined as follows

--Create an Appoitment 
create proc usp_AddAppointment
(
@Appointment_Descr varchar(max) ,
@StartDate Datetime,
@EndDate Datetime
)
AS
INSERT INTO tblAppointment
VALUES(@Appointment_Descr,@StartDate,@EndDate)
 
--Move Appointment 
Create proc usp_MoveAppointment
(
@AppointmentID int,
@NewStartDate Datetime,
@NewEndDate Datetime
)
As
UPDATE tblAppointment
SET StartDate = @NewStartDate,EndDate= @NewEndDate
WHERE Appointment_Id = @AppointmentID
 
--Delete Appointment
Create proc usp_DeleteAppointment 
(
@AppointmentID int
)
as 
DELETE tblAppointment
WHERE Appointment_Id = @AppointmentID
 
--Get Appointments
CREATE PROC usp_GetAppointments 
AS
SELECT Appointment_Id,Appoitment_Descr,StartDate,EndDate from tblAppointment

Now let us add example data that will be on the same date, but time with different time.

INSERT INTO tblAppointment
values('My Wife`s Birthday',GETDATE(),GETDATE())
 
 
 
INSERT INTO tblAppointment
values('My Sister`s Birthday',GETDATE(),GETDATE())
 
 
 
INSERT INTO tblAppointment
values('My daugther`s Birthday',GETDATE(),GETDATE())
 
 
 
INSERT INTO tblAppointment
values('My Brothers`s Birthday',GETDATE(),GETDATE())
 
 
INSERT INTO tblAppointment
values('My`s Birthday',GETDATE(),GETDATE())
 

Now if run a Select *, you will have data in your appointment table, Now let us display the data, we are going to use the usp_GetAppointments stored procedure to query all the appointments that we have created from SQL.

Back to ASP.Net

 Open your visual studio, drag and drop the “RadSchedular” from your toolbox, and make sure your mark-up looks like this

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
       <title></title>
       <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
       <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
              <Scripts>
                     <%--Needed for JavaScript IntelliSense in VS2010--%>
                     <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                     <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                     <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                     <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
              </Scripts>
       </telerik:RadScriptManager>
       <script type="text/javascript">
              //Put your JavaScript code here.
    </script>
       <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
       </telerik:RadAjaxManager>
 
       <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Black">
       </telerik:RadSkinManager>
       <telerik:RadScheduler ID="RadScheduler1" runat="server" DataEndField="ENDDATE" 
        DataKeyField="Appointment_Id" DataStartField="STARTDATE" DataSubjectField="SUBJECTS" 
        onappointmentcreated="RadScheduler1_AppointmentCreated" 
        ondatabound="RadScheduler1_DataBound" Skin="Black">
    </telerik:RadScheduler>
       <div>
 
       </div>
       <asp:Label ID="lblAppointment" runat="server"></asp:Label>
       </form>
</body>
</html>

I have created events and I will explain them as I go with the Parts of the series. Before you bind the Scheduler with any data source. You need to tell the Scheduler where will the values come from. Meaning you need to map the names of the Fields to the one you have on the database. The Scheduler needs only the Following to work

·         DataKeyField

·         DataStartField

·         DataEndField

·         DataSubjectField

The DataKeyField is the primary key of the appointment; it is the value that identifies the appointment uniquely. Every appointment must be unique in that key level and in our case the DataKeyField is Appointment_Id

The DataStartField is the Start DateTime; every appointment must have a start time and date, to be classified as a valid appointment in a scheduler.

The DataEndField is the End DateTime; Every Appointment must have an end dateTime.

·         The DataSubjectField is what will be displayed in the Scheduler, in our case we have supplied data like 'My Brothers`s Birthday'

Your server side code should look like this

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
 
public partial class Default : System.Web.UI.Page
{
       protected void Page_Load(object sender, EventArgs e)
       {
              if (!Page.IsPostBack)
              {
                     GetAppointments();
              }
       }
 
 
 
       // You can safely ignore this method.
       // Its purpose is to limit the changes to the underlying data only to the active user session.
       protected void Page_Init(object sender, EventArgs e)
       {
 
       }
       protected void RadScheduler1_DataBound(object sender, EventArgs e)
       {
              // Turn off the support for multiple resource values.
              foreach (ResourceType resType in RadScheduler1.ResourceTypes)
              {
                     resType.AllowMultipleValues = false;
              }
       }
 
       protected void RadScheduler1_AppointmentCreated(object sender, AppointmentCreatedEventArgs e)
       {
              if (e.Appointment.RecurrenceState == RecurrenceState.Master || e.Appointment.RecurrenceState == RecurrenceState.Occurrence)
              {
                     Panel recurrenceStateDiv = new Panel();
                     recurrenceStateDiv.CssClass = "rsAptRecurrence";
                     e.Container.Controls.AddAt(0, recurrenceStateDiv);
              }
              if (e.Appointment.RecurrenceState == RecurrenceState.Exception)
              {
                     Panel recurrenceStateDiv = new Panel();
                     recurrenceStateDiv.CssClass = "rsAptRecurrenceException";
                     e.Container.Controls.AddAt(0, recurrenceStateDiv);
              }
       }
 
       private void GetAppointments()
      {
              String Strcon = @"User id=app;Password=app;Server=VuyiswaED#SSfga;Database=Appointments";
 
              SqlConnection con = new SqlConnection(Strcon);
 
              SqlCommand cmdselect = new SqlCommand();
 
              cmdselect.CommandText = "usp_GetAppointments";
 
              cmdselect.CommandType = CommandType.StoredProcedure;
 
              cmdselect.Connection = con;
 
              SqlDataAdapter da = new SqlDataAdapter();
 
              da.SelectCommand = cmdselect;
 
              DataSet dsAppointment = new DataSet();
 
 
              RadScheduler1.DataStartField = "StartDate";
              RadScheduler1.DataSubjectField = "Appoitment_Descr";
              RadScheduler1.DataEndField = "EndDate";
              RadScheduler1.DataKeyField = "Appointment_Id";
               
              try
              {
                     con.Open();
 
                     da.Fill(dsAppointment, "Appointment");
                     RadScheduler1.DataSource = dsAppointment;
                     DataView dv = dsAppointment.Tables[0].DefaultView;
                     RadScheduler1.DataSource = dv;
                     RadScheduler1.DataBind();
                     RadScheduler1.SelectedView = SchedulerViewType.MonthView;
                     RadScheduler1.SelectedDate = Convert.ToDateTime(dv.Table.Rows[0]["EndDate"]);
                     RadScheduler1.Visible = true;
                     
              }
              catch (SqlException ex)
              {
                     lblAppointment.Text = ex.Message;
              }
              finally
              {
                     con.Close();
              }
                     
       }
}

As you can see i am binding the Scheduler on page load from a Data DataView and I am showing the first available appointment for today. And if you run this with my favorite skin (black), it will look like this

And at the bottom of the last appointment, you will see there will be a link button that says “more” in fact when you move your mouse over, you will see a link hand that indicates you can see more or navigate, if you click it, it will take you to a Day view, because initially it is month view as depicted below

This is how you show your appointments using Telerik’s Scheduler in asp.net, there are more options to bind the scheduler, and you can bind from different data sources like XML and more.  In the Next Series, I will show you two things on the Scheduler, I will show you how you can create an Appointment from the Application itself and Delete the appointments and move the Appointments using the stored procedures we created.

Conclusion

Telerik is number one in the industry of third party controls, they are better than a lot of their competitors , their controls are user friendly and not heavy, though if this controls are not used properly they can lead to poor performance.  The Part II of this series will be available in few days

Thank you again for Visiting Dotnetfunda.

Kind Regards

Vuyiswa Maseko