Search code examples
javascriptjqueryjsonkendo-uikendo-scheduler

How can I bind data (in JSON format) from local database to Kendo UI Scheduler?


After doing some tuts of the Kendo UI framework, I'm having problems using one of their widgets. I've only a basic understanding of the framework and this is even my first question ever in StackOverflow so... please spare me from "advanced" answers if possible.

So, here's the thing:

I want to use the Scheduler widget to make a timeline month view with data from a JSON file. The data (in JSON format) I'm planning to use comes from a SQL Server database that is called on the client-side by an Ajax call that connects to a web service. Sample:

Params.type = 'GET';
Params.url = 'LoremIpsum-YeahDomainService.svc/JSON/GetPeople';
Params.dataType = 'json'

To know if the web service is working fine, I tried to retrieve information from the database into a Kendo DropDownList and everything went okay. I did this script:

var getPeople;
getPeople = data.GetPeopleResult.RootResults;
var listPeople = [];
getPeople.forEach(function(person){
   var newelement = { 'Name': person.Name, 'value': i, 'color': '#808080' };
   listPeople.push(newelement);
});

After doing that script, I used the following script:

$("#dropdownlist").kendoDropDownList({
  dataTextField: "Name",
  dataValueField: "value",
  dataSource: new kendo.data.DataSource ( { listPeople } )
});

As planned, I got all the data I wanted to see in the browser.

Therefore, now I want to produce script for the Kendo Scheduler with a timeline month view like this one without the "Meeting Rooms" section and I want the names of the persons that are called from the database.

Just like with the DropDownList, it doesn't matter if I have 30 or 300 person names. The persons on the Scheduler can't be static because the database will be updated often. In a nutshell, the names of the persons that are shown in the Scheduler must be provided dynamically from the database.

I already used multiple scripts from the Kendo UI Scheduler documentation as all my scripts for the widgets are based on their examples but until now, nothing worked out.

Based on the example provided in the Kendo UI documentation for the timeline month view, I've some of their scripts adapted such as:

dataSource: {
   batch: true
   transport: {
      read: {
         url: "http://localhost:50379/LoremImpsum-YeahDomainService.svc/json/GetPeople",
         dataType: "json"

group: {
   resources: ["People"],
   orientation: "vertical"

Also in relation to the Scheduler script, based on the example provided on the Telerik website I did a script that would get the persons names from the database. Here it is:

var result = [];
result[0] = { text: "+getPeople[0]+", value: "1", color: "green" }";

for(i=1; i<getPeople.length(); i++){
   resultado[i] = ", { text: "+getPeople[i]+"value: "+(i+1)+", color: "green";
   i=i+1;
});

With that script in mind, my idea was to call that array on the resources section of the Scheduler widget as something like this:

resources: [
   {
      field: "people",
      name: "People",
      dataSource: [ data: getPeople
        ]
]

Any ideas or thoughts?

P.S.

I also created some script based on Kendo documentation using Kendo UI Dojo and you can see see exactly the type of view I need there.


Solution

  • To whoever may be interested in the future, I found a way to do this. In a nutshell, very quickly and simple:

    resources: [{
       field: "Name",
       name: "People",
       dataTextField: "Name",
       dataValueField: "Name",
       dataSource: new kendo.data.DataSource({
          transport: {
             read: {
                url: "http://localhost:50379/LoremImpsum-YeahDomainService.svc/json/GetPeople"
             }
          },
          schema: {
             type: "json",
             data: "GetPeopleResult.RootResults"
          }
       }
    ),
       multiple: true,
       title: "name"
    }]