Telerik blogs

In the previous series of OData binding related posts we introduced OData support for our Grid, ListView and navigation controls. Well, it is time for a new control to utilize such binding. I am happy to announce that forth from Q2 2012 one can easily bind the Telerik's ASP.NET Ajax Scheduler to OData exposed feed using simple markup.

Why OData

One may ask why OData when it is possible to expose AppointmentData objects via simple ASMX/WCF service and have the Scheduler directly bound? Well, the OData binding gives you the freedom to bind against any JSON structure, as long as the core scheduler Data Fields are present in the structure. These are ID, Start, End and Subject.

Additionaly, if the JSON structure contains ICal compatible recurrence rule one can set the RecurrenceField property in order to utilize recurrence. If there is field that can be used for description, the Description field should be mapped. Please take a look at the enhanced markup below for details:

 scheduler markup

Practical Usage

Enough theory, lets get into practice!

Imagine that we have a database table with the schedule of a .NET conference and we want to publicly expose it to the web so that anyone in the world can consume it. To illustrate this, lets create a sample database with three tables - Sessions, Halls and Levels. The session table contains information for a given session i.e. start/end time, subject, level, hall and description. The Halls and Levels tables can be considered as resources for the Scheduler (one can choose to group by hall or level). Here is sample database diagram:

 

In order to be accessibly from the outside world, our DataService need to return JSONP wrapped response. We also need a service, right? : ) I've stumbled upon a very good intro article on how to expose DataBase in the OData format using Wcf Data Service/Entity framework. The tutorial can be found here.

Lets imagine that we have the service working and it is returning JSON. We now need to bind our scheduler against the JSON feed. Lets first take a look at a snippet containing information for a particular appointment:

sample odata feed

As you can see, the fields in the JSON structure resemble pretty much of appointment, right? Well, lets map them to the Scheduler then! Here is a sample markup to display the appointments only, without grouping:

<telerik:RadScheduler ID="RadScheduler1" runat="server"
        AppointmentStyleMode="Default" SelectedView="WeekView" SelectedDate="2011/10/17"
        GroupBy="Hall"      ReadOnly="true">
        <WebServiceSettings Path="http://sergeev/SchedulerTelerikOData/Sessions.svc/">
            <ODataSettings
                DataStartField="StartTime"
                DataEndField="EndTime"
                DataKeyField="SessionId"
                DataDescriptionField="Description"
                DataSubjectField="Subject"
                InitialContainerName="Sessions"
                ResponseType="JSON">
            </ODataSettings>
        </WebServiceSettings>

    </telerik:RadScheduler>

As you can see each data field is mapped to its JSON representation in the response. If we want to utilize grouping by resources (in this case by Hall or Levlel) we can extend the markup by adding

<ResourceTypes>
        <telerik:ODataResourceType Container="Halls" Name="Hall" KeyField="HallId" TextField="Name" />
</ResourceTypes>

to the OData setting section. Again, we map the data properties to the JSON response. Container is the name of the entity that exposes information for the available halls. The Name is the singular of the container name and the KeyField and TextField map to the respective id and hall name.

You can find the result display in the RadScheduler below:

odata scheduler

What's next?

Congratulations if you have read so far! Here comes the most interesting part. For the next release we are planning a new control that will allow for design time configuration for OData binding. Yes, I am talking about the ODataDataSource! However, we need your feedback on this one. What features do you want to see? Which controls do you think must be supported for the initial release? We are waiting to hear from you!

 


Genady-Sergeev
About the Author

Genady Sergeev

is a Senior Manager in the Progress Web UI & Tools division, which develops the Kendo UI, UI for ASP.NET MVC and UI for ASP.NET AJAX products. He joined the company back in 2009 and since then he has been involved with the web UI products on a variety of levels, from a single contributor to a senior manager. Genady's main interests are in the field of client-side development and he is a big fan of the DevOps philosophy. In his free time he likes skiing and cross-country cycling.

Comments

Comments are disabled in preview mode.