Cannot bind data from json service

[garry]

Having trouble using the navigate function to call a controller that returns json. The call is going to the controller and back to the client side, so I know that is working.


@(Html.Kendo().Scheduler<EPR.Web.Entities.Patient.Appointment>()
                .Name("scheduler")
                .AllDaySlot(false)
                .Date(DateTime.Now)
                .StartTime(new DateTime(2013, 6, 28, 08, 00, 00))
                .EndTime(new DateTime(2013, 6, 28, 18, 00, 00))
                .Editable(false).Views(views =>
                {
                    views.DayView(dayView => dayView.Selected(true));
                })
                .Events(e =>
                {
                    e.Navigate("scheduler_navigate");
                })
                .DataSource(d => d.Read(r => r.Action("ConsultantClinic_Read", "Calendar")))
                .Views(m => m.DayView(d => d.EventTemplate(DayView)))
                .Views(m => m.WeekView(d => d.EventTemplate(DayView)))
                .Views(m => m.AgendaView(d => d.EventTemplate(AgendaView)))
                .BindTo(Model)
                .Resources(resource =>
                {
                    resource.Add(m => m.SourceClinic)
                        .Title("Owner")
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .DataColorField("Color")
                        .BindTo(details);
                })
                .Events(e => e.DataBound("scheduler_dataBound"))
                .Views(m => m.DayView(d => d.EventTemplate(DayView)))
                .Views(m => m.WeekView(d => d.EventTemplate(DayView)))
                .Views(m => m.AgendaView(d => d.EventTemplate(AgendaView)))
                )


Later in the page inside a script element:-

    function scheduler_navigate(e) {

        var date = kendo.toString(e.date, "dd-MM-yyyy");

        $.ajax({
            type: "GET",
            url: "/Calendar/Navigate",
            data:
                {
                    date: date
                }
        })
              .done(function (result) {
                  var scheduler = $("#scheduler").data("kendoScheduler");
                  var dataSource = new kendo.data.SchedulerDataSource({
                      data: [
                          new kendo.data.SchedulerEvent(
                              {
                                  "AppointmentId": 4031761, "AppointmentDate": "2013-11-13T08:50:00", "Status": 0,
                                  "StatusString": "New", "StatusCode": "NW", "AppointmentDateFormatted": "13 Nov 2013 08:50",
                                  "AppointmentDateOnlyFormatted": "13 Nov 2013", "AppointmentTimeFormatted": "08:50",
                                  "Patient":
                                  {
                                      "PatientID": 0, "Casenote": "E101/10101", "Forenames": "Test", "Surname": "Test", "Gender": "F", "DOB": "1900-01-11T00:00:00", "NHSNumber": null,
                                      "DistrictNumber": null, "Age": 81, "Appointments": [], "CurrentAdmission": null, "Allergies": [],
                                      "ContactDetails":
                                      {
                                          "Address": null, "HomeTelephone": null,
                                          "WorkTelephone": null
                                      },
                                      "Medications": [], "Admissions": [], "PatientName": "Test TEST", "PatientNameInGender": "Test TEST (F)", "PatientNameInitial": "T TEST",
                                      "Heading": "Test TEST (F) 11 Jan 1900 ()", "DOBIncAge": "11 Jan 1900 ()", "PatientTemplate": "Test TEST (F) Test TEST (F) 11 Jan 1900 ()"
                                  },
                                  "ClinicCode": "REFCLIN", "SourceClinic": "TestClinic", "AppointmentType": "Planned", "Description": "TestCLIN",
                                  "Consultant": "AA", "End": "2013-11-13T09:10:00", "IsAllDay": false, "RecurrenceException": null, "RecurrenceRule": null,
                                  "Start": "2013-11-13T08:50:00", "Title": "Test TEST (F)"
                              }

                          )
                      ]
                  });

                  scheduler.setDataSource(dataSource);

              });

    }

I know this function is getting fired because I can log it to the console. So it is just down to the databinding, nothing shows up in the view except an empty calendar. No errors either are getting logged.

Any help would be great thanks.

[Vladimir Iliev]

Hi Garry,

 
In current case I would suggest different approach to achieve the desired behavior  - to add the Data function which to return filter object to the controller. That way the server filtering will work for all views as expected. Please check the example below:

1) Set the Data method to point to the "filterData" function (it will be called before each request to the server and it's used to include addtional parameters to the response):

@(Html.Kendo().Scheduler<Scheduler.Models.Scheduler.TaskViewModel>()
    .Name("scheduler")
    .Date(new DateTime(2013, 10, 07))
    .StartTime(new DateTime(2013, 10, 07, 12, 00, 00))
    .Height(900)
    .DataSource(d => d
        .ServerOperation(true)
        .Model(m => m.Id(f => f.TaskID))
        .Read(r => r.Action("Read", "Home").Data("filterData"))
        .Create("Create", "Home")
        .Destroy("Destroy", "Home")
        .Update("Update", "Home")
    )

2) Add the "filterData" function:

function filterData(e) {
    var scheduler = $("#scheduler").data("kendoScheduler");
    //create filter object that will apply the correct filtering on the server side
    var filter = {
        filter: {
            filters: [
                    { field: "Start", operator: "gte", value: scheduler.view().startDate() },
                    { field: "End", operator: "lte", value: scheduler.view().endDate() }
            ],
            logic: "and"
        }
    }

    return filter;
}

3) Setup the Read action on the controller to accept DataSourceRequest as parameter and filter the result based on it:

public virtual JsonResult Read([DataSourceRequest] DataSourceRequest request)
{
    //filter the result based on incomming filter object (if such is available)
    return Json(taskService.GetAll().ToDataSourceResult(request));
}

Edit:

With above approach however the recurring events cannot be selected correctly - that why you can extend the above example to send just start and end date of current view and manually filter the results on the server as demonstrated in the following CodeLibrary demo:

• KendoUI scheduler for Web:  Server Filtering

 
Regards,
Vladimir Iliev
Telerik