Post
Ask Question

Kendo Scheduler With Remote Binding Using ASP.NET WEP 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.


Similar Articles