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();
  5. // GET: api/Events
  6. public IQueryable<Event> GetEvents()
  7. {
  8. return db.Events;
  9. }
  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. }
  21. return Ok(@event);
  22. }
  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. }
  33. if (id != @event.TaskID)
  34. {
  35. return BadRequest();
  36. }
  38. db.Entry(@event).State = EntityState.Modified;
  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. }
  56. return StatusCode(HttpStatusCode.NoContent);
  57. }
  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. }
  68. db.Events.Add(@event);
  69. db.SaveChanges();
  71. return CreatedAtRoute("DefaultApi", new { id = @event.TaskID }, @event);
  72. }
  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. }
  84. db.Events.Remove(@event);
  85. db.SaveChanges();
  87. return Ok(@event);
  88. }
  90. protected override void Dispose(bool disposing)
  91. {
  92. if (disposing)
  93. {
  94. db.Dispose();
  95. }
  96. base.Dispose(disposing);
  97. }
  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">
  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,
  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,
  4. tasks: new kendo.data.SchedulerDataSource({
  5. batch: true,
  6. transport: {
  7. read: {
  8. url: "api/Events",
  9. dataType: "json"
  10. },
  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.