I'm looking for a way to connect my open source Kendo UI Scheduler to a local database using javascript.
I've already started but got stuck because I can't find any helpful documentation on how to do this using javascript.
$(function () {
$('#scheduler').kendoScheduler({
views: [{type:"day", selected:true}],
dataSource:
{
transport:
{
read: { url: "@Url.Action("GetTasks","Schedules")", dataType: "json" },
update: { url: "@Url.Action("UpdateTask","Schedules")", dataType: "json" },
create: { url: "@Url.Action("CreateTask","Schedules")", dataType: "json" },
destroy: { url: "@Url.Action("DeleteTask","Schedules")", dataType: "json" },
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema:
{
/* Define your actual models for your events here */
model:
{
/* See the available documentation for more information */
}
}
I've been looking on the Telerik documentation without any success besides that I looked for some clues here on stackoverflow but besides this thread https://stackoverflow.com/questions/23322409/how-to-bind-datasource-to-the-scheduler-in-kendo-ui-using-javascript I couldn't find anything helpful.
Can anybody point me in the right direction concerning useful documentation or an illustrative example binding the Kendo UI Scheduler to a local database using javascript?
Thanks in advance
MODEL
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;
namespace Eindwerk.Models
{
public class Events
{
public int Id { get; set; }
public string eventTitle { get; set; }
public DateTime eventStart { get; set; }
public DateTime eventStop { get; set; }
public Boolean eventAllday { get; set; }
public string eventDescription { get; set; }
public string eventRoom { get; set; }
public string eventAttend { get; set; }
public string eventExtra { get; set; }
public string eventRequest { get; set; }
public class CalendarDBContext : DbContext
{
public DbSet<Events> RoomEvents { get; set; }
}
}
}
TASKVIEWMODEL
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Eindwerk.Models
{
public class TaskViewModel
{
public int TaskID { get; set; }
public string Title { get; set; }
public string Description { get; set; }
private DateTime start;
public DateTime Start
{
get
{
return start;
}
set
{
start = value.ToUniversalTime();
}
}
private DateTime end;
public DateTime End
{
get
{
return end;
}
set
{
end = value.ToUniversalTime();
}
}
public bool IsAllDay { get; set; }
public int? OwnerID { get; set; }
public string eventRoom { get; set; }
public string eventAttend { get; set; }
public string eventExtra { get; set; }
public string eventRequest { get; set; }
}
}
CONTROLLER
private Events.CalendarDBContext db = new Events.CalendarDBContext();
public ActionResult Tasks_Read()
{
using (var sampleDB = db)
{
IQueryable<TaskViewModel> tasks = sampleDB.RoomEvents.ToList().Select(task => new TaskViewModel()
{
TaskID = task.Id,
Title = task.eventTitle,
Start = DateTime.SpecifyKind(task.eventStart, DateTimeKind.Utc),
End = DateTime.SpecifyKind(task.eventStop, DateTimeKind.Utc),
Description = task.eventDescription,
IsAllDay = task.eventAllday,
OwnerID = 1
}).AsQueryable();
//return Json(tasks.ToDataSourceResult(Request));
return Json(tasks.ToList(), JsonRequestBehavior.AllowGet);
}
}
public ActionResult Tasks_Create([DataSourceRequest]DataSourceRequest request, TaskViewModel task)
{
if (ModelState.IsValid)
{
using (var sampleDB = db)
{
//Create a new Task entity and set its properties from the posted TaskViewModel
var entity = new Events
{
Id = task.TaskID,
eventTitle = task.Title,
eventStart = DateTime.SpecifyKind(task.Start, DateTimeKind.Utc),
eventStop = DateTime.SpecifyKind(task.End, DateTimeKind.Utc),
eventDescription = task.Description,
eventAllday = task.IsAllDay
};
// Add the entity
sampleDB.RoomEvents.Add(entity);
//sampleDB.Tasks.AddObject(entity);
// Insert the entity in the database
sampleDB.SaveChanges();
// Get the TaskID generated by the database
task.TaskID = entity.Id;
}
}
// Return the inserted task. The scheduler needs the generated TaskID. Also return any validation errors.
return Json(new[] { task }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
}
}
}
VIEW
$(function () {
$('#scheduler').kendoScheduler({
date: new Date(Date.now()),
startTime: new Date("2014/03/07 09:00 AM"),
endTime: new Date("2014/03/07 07:00 PM"),
height:800,
views: [{type:"day", selected:true}],
timezone: "Etc/UTC",
dataSource:
{
transport:
{
read: { url: "@Url.Action("Tasks_Read","Home")", dataType: "json" },
update: { url: "@Url.Action("Tasks_Update","Home")", dataType: "json" },
create: { url: "@Url.Action("Tasks_Create","Home")", dataType: "json" },
destroy: { url: "@Url.Action("Tasks_Destroy","Home")", dataType: "json" },
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { type: "number" },
title: { defaultValue: "No title", validation: { required: true } },
start: { type: "DateTime" },
end: { type: "DateTime" },
roomId: { nullable: true },
attendee: { defaultValue: 1 },
isAllDay: { type: "boolean" }
}
}
}
