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.
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:
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:
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:
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
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:
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 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.
Copyright © 2017, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.