ASP.NET

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs