Navigate to another Page after appointment has been saved in kendo scheduler

Question

I have got this scheduler displayed but not binding to tasks. The scheduler in the view. I am using java script method to read/create call to web api

@(Html.Kendo().Scheduler<TaskViewModel> ()
.Name("AppointmentSearchScheduler")
.DataSource(dataSource => dataSource
.Custom()
.Schema(schema => schema
 .Model(m => {
  m.Id(f => f.TaskID);
  m.Field(f => f.OwnerID).DefaultValue(1);
 }))
.Transport(new {
 read = new Kendo.Mvc.ClientHandlerDescriptor() {
   HandlerName = "customRead"
  },
  create = new Kendo.Mvc.ClientHandlerDescriptor() {
   HandlerName = "customCreate"
  }
})))

Below is javascript handler method I am not including create handler for brevity.

function customRead(options){
    //get the selected Row of the kendo grid
    var selectedRow = $("#locationgridKendo").find("tbody tr.k-state-selected");
    var scheduler = $("#AppointmentSearchScheduler").data("kendoScheduler")

    //get SelectedRow data
    var rowData = $('#locationgridKendo').data("kendoGrid").dataItem(selectedRow);

    if (rowData !== null) {
        //Convert data to JSON
        var rowDataJson = rowData.toJSON();
        //extract the location ID
        var locationId = rowDataJson.LocationID;          
        var CalenderweekStartDate = new Date().toISOString();
        baseUrl = $('base').attr('href');
        $.ajax({
            url: baseUrl + 'Schedular/api/GetAppPerLocation?locationId=' + locationId + '&date=' + CalenderweekStartDate,
            type: 'GET',
            cache: false,
            contentType: 'application/json',               
            success: function (result) {
//This method is hitting and i can see the data being returned
                console.log('data is received : ' + result.Data);
                options.success(result.Data);
            },
            error: function (xhr, status, error) {
                //alert("Error: Search - Index.js - submitAppointment()");
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });

    }

}

Here is the web API controller called by making ajax call . The controller works perfectly when i used the basic read/create syntax . The ajax call complete and it does hit back the success method and returns the data but scheduler for some reason is not binded to incoming data. Here is my controller code

[HttpGet]
[Route("api/GetAppPerLocation")]
public DataSourceResult GetAppointmentPerLocation([ModelBinder(typeof(Usps.Scheduling.Web.ModelBinders.DataSourceRequestModelBinder))] DataSourceRequest request, int locationId, DateTime date) {

 List < TaskViewModel > locationAvailableAppointmentList = new List < TaskViewModel > ();
  locationAvailableAppointmentList = data.Select(appt => new TaskViewModel() {
   TaskID = appt.ServiceAppointmentId,
    Title = "Appointment Available",
    Start = DateTime.SpecifyKind(appt.AppointmentBegin, DateTimeKind.Local),
    End = DateTime.SpecifyKind(appt.AppointmentEnd, DateTimeKind.Local),
    Description = "",
    IsAllDay = false
  }).ToList();

 return locationAvailableAppointmentList.ToDataSourceResult(request);
}

For some reason the scheduler is not binding to incoming data . the incoming data works perfectly when i use a basic binding approach but not using transport . My goal for using this approach is once i am done with read(scheduler is not binding now) , on create I need to grab the ID of the newly created task returned by my controller and then pass that id to another mvc controller to render a confirmation page. Any other approach to accomplish this goal will be highly recommended.

Please excuse me for any mistake since this is my first question on stackoverflow.

Answer 1

My goal for using this approach is once i am done with read(scheduler is not binding now) , on create I need to grab the ID of the newly created task returned by my controller and then pass that id to another mvc controller to navigate render a confirmation page.

I speculated that read was not returning correct result so i had to fix that .Also my basic goal was redirection to another page after with appointment id and displaying a confirmation screen. This is how accomplished it . I understand this is not the best approach but it has been more than a year no body answered by question. Here is the approach i took .

I added a error to the model state like this in my controller

if (!String.IsNullOrEmpty(task.TaskID.ToString()))//redirect to confirmation page if the appointment was added to the queue
   ModelState.AddModelError("AppointmentID", confirmationNumber);

then on client side i configure the error event on grid like this

.Events(
    events => events.Error("RedirectToConfirmationPage"))

Here is the Javascript method details

function RedirectToConfirmationPage(e) {
        console.log('RedirecToConfirmationPage method......');
        console.log(e);
        if (e.errors) {
            var appointmentID = "";
            // Create a message containing all errors.
            $.each(e.errors, function (key, value) {
                console.log(key);
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        appointmentID += this + "\n";
                    });
                }
            });
            console.log('Newly Generated AppointmentID  = ' + appointmentID);

            // Redirect URL needs to change if we're running on AWS instead of on local developer machines
            if (window.location.href.indexOf('/TestProject.Scheduling') > 1) {
                window.location.href = '/Scheduler/AppointmentConfirmation?confirmationNumber=' + appointmentID
            }
            else {
                window.location.href = '/Scheduler/AppointmentConfirmation?confirmationNumber=' + appointmentID
            }

        }
    }

Hope it is helpfull to someone down the road.