Kendo Scheduler With Remote Binding Using ASP.NET WEP API And Entity Framework

In this article you will learn how to implement Kendo Scheduler with remote binding using ASP.NET WEB API and Entity Framework.

Introduction

In my previous article working with scheduler widget in Kendo UI I explained how to implement the Kendo Scheduler in a web application. From this article we will learn how to remote bind the Kendo Scheduler using ASP.NET WEB PI and Entity Framework.

Remote Binding the Kendo Scheduler

  • Open Visual Studio and create a new project.
  • Select File, New and then Project.
  • Select Web in the installed template and select ASP.NET Web Application.
  • Provide the name for the project and click OK, as in the following figures.
  
 
 

My database schema is as in the following figure:

  

My table structure is as in the following figure:
 
 
I am using the Entity Framework with Database First approach, so the Entity Framework builds default model classes and context classes.

Here is my code in EventController Class:
  1. public class EventsController : ApiController    
  2. {    
  3.     private EventEntities db = new EventEntities();    
  4.   
  5.     // GET: api/Events    
  6.     public IQueryable<Event> GetEvents()    
  7.     {    
  8.         return db.Events;    
  9.     }    
  10.   
  11.     // GET: api/Events/5    
  12.     [ResponseType(typeof(Event))]    
  13.     public IHttpActionResult GetEvent(int id)    
  14.     {    
  15.         Event @event = db.Events.Find(id);    
  16.         if (@event == null)    
  17.         {    
  18.             return NotFound();    
  19.         }    
  20.   
  21.         return Ok(@event);    
  22.     }    
  23.   
  24.     // PUT: api/Events/5    
  25.     [ResponseType(typeof(void))]    
  26.     public IHttpActionResult PutEvent(int id, Event @event)    
  27.     {    
  28.         if (!ModelState.IsValid)    
  29.         {    
  30.             return BadRequest(ModelState);    
  31.         }    
  32.   
  33.         if (id != @event.TaskID)    
  34.         {    
  35.             return BadRequest();    
  36.         }    
  37.   
  38.         db.Entry(@event).State = EntityState.Modified;    
  39.   
  40.         try    
  41.         {    
  42.             db.SaveChanges();    
  43.         }    
  44.         catch (DbUpdateConcurrencyException)    
  45.         {    
  46.             if (!EventExists(id))    
  47.             {    
  48.                 return NotFound();    
  49.             }    
  50.             else    
  51.             {    
  52.                 throw;    
  53.             }    
  54.         }    
  55.   
  56.         return StatusCode(HttpStatusCode.NoContent);    
  57.     }    
  58.   
  59.     // POST: api/Events    
  60.     [ResponseType(typeof(Event))]    
  61.     public IHttpActionResult PostEvent(Event @event)    
  62.     {    
  63.         if (!ModelState.IsValid)    
  64.         {    
  65.             return BadRequest(ModelState);    
  66.         }    
  67.   
  68.         db.Events.Add(@event);    
  69.         db.SaveChanges();    
  70.   
  71.         return CreatedAtRoute("DefaultApi"new { id = @event.TaskID }, @event);    
  72.     }    
  73.   
  74.     // DELETE: api/Events/5    
  75.     [ResponseType(typeof(Event))]    
  76.     public IHttpActionResult DeleteEvent(int id)    
  77.     {    
  78.         Event @event = db.Events.Find(id);    
  79.         if (@event == null)    
  80.         {    
  81.             return NotFound();    
  82.         }    
  83.   
  84.         db.Events.Remove(@event);    
  85.         db.SaveChanges();    
  86.   
  87.         return Ok(@event);    
  88.     }    
  89.   
  90.     protected override void Dispose(bool disposing)    
  91.     {    
  92.         if (disposing)    
  93.         {    
  94.             db.Dispose();    
  95.         }    
  96.         base.Dispose(disposing);    
  97.     }    
  98.   
  99.     private bool EventExists(int id)    
  100.     {    
  101.         return db.Events.Count(e => e.TaskID == id) > 0;    
  102.     }    
  103. }   

Check the API services using the POSTMAN/Fiddler as in the following figures.

 
 
Now it's time for creating a design to consume the service.

Create an HTML page, here is the design,

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">  
  6.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">  
  9.   
  10.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  11.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>  
  14.     <meta charset="utf-8" />  
  15. </head>  
  16. <body>  
  17.     <div id="example">  
  18.         <div class="demo-section k-content wide">  
  19.             <div>  
  20.                 <h4>Add an event</h4>  
  21.                 <div data-role="scheduler"  
  22.                      data-views="['day']"  
  23.                      data-bind="source: tasks,  
  24.                             visible: isVisible,  
  25.                      
  26.                      style="height: 600px"></div>  
  27.             </div>  
  28.             <div style="padding-top: 1em;">  
  29.                 <h4>Console</h4>  
  30.                 <div class="console"></div>  
  31.             </div>  
  32.         </div>  
  33.        </body>
  34. </html>
JavaScript
  1. var viewModel = kendo.observable({  
  2.         isVisible: true,  
  3.          
  4.         tasks: new kendo.data.SchedulerDataSource({  
  5.             batch: true,  
  6.             transport: {  
  7.                 read: {  
  8.                     url: "api/Events",  
  9.                     dataType: "json"  
  10.                 },  
  11.             
  12.                 parameterMap: function(options, operation) {  
  13.                     if (operation !== "read" && options.models) {  
  14.                         return {models: kendo.stringify(options.models)};  
  15.                     }  
  16.                 }  
  17.             },  
  18.             schema: {  
  19.                 model: {  
  20.                     id: "taskId",  
  21.                     fields: {  
  22.                         taskId: { from: "TaskID", type: "number" },  
  23.                         title: { from: "Title", defaultValue: "No title", validation: { required: true } },  
  24.                         start: { type: "date", from: "Start" },  
  25.                         end: { type: "date", from: "EndDate" },  
  26.                         startTimezone: { from: "StartTimezone" },  
  27.                         endTimezone: { from: "EndTimezone" },  
  28.                         description: { from: "Description" },  
  29.                         recurrenceId: { from: "RecurrenceID" },  
  30.                         recurrenceRule: { from: "RecurrenceRule" },  
  31.                         recurrenceException: { from: "RecurrenceException" },  
  32.                         isAllDay: { type: "boolean", from: "IsAllDay" }  
  33.                     }  
  34.                 }  
  35.             }  
  36.         })  
  37.     });  
  38.     kendo.bind($("#example"), viewModel);  
The result in browser

Calander
 
Table 
 
References

Conclusion:

From this article we learned how to remote bind the Kendo Scheduler using ASP.NET WEB PI and Entity Framework. In my upcoming article I am going to discuss about how to perform the CRUD operation in Kendo Scheduler and their events.