Kendo UI Scheduler conversion

[Kevork]

Hi,

I am facing difficulties converting my scheduler from ASP.NET MVC to Kendo UI. Here is my ASP.NET MVC code. It's working fine but Kendo UI scheduler is not working and throws "500 (Internal Server Error)" in browser console

 

@(Html.Kendo().Scheduler<TaskViewModel>()
    .Name("schedulerJob")
    .Date(new DateTime(System.DateTime.Today.Year, System.DateTime.Today.Month, System.DateTime.Today.Day))
    .StartTime(new DateTime(System.DateTime.Today.Year, System.DateTime.Today.Month, System.DateTime.Today.Day, 7, 00, 00))
    .Height(600)
    .Views(views =>
    {
        views.DayView();
        views.WeekView();
        views.TimelineView(v => v.Selected(true));
    })
    .Events(e =>
    {
        e.Edit("schedulerJob_edit");
        e.Navigate("schedulerJob_navigate");
    })
    .Timezone("Etc/UTC")
    .Group(group => group.Resources("Techs").Orientation(SchedulerGroupOrientation.Vertical))
    .Resources(resource =>
    {
        resource.Add(m => m.TechName)
            .Title("Techs")
            .Name("Techs")
            .DataTextField("emm_code")
            .DataValueField("emm_code")
            .DataSource(d => d.Read("Techs", "JOBS"));
    })
    .DataSource(d => d
        .Model(m =>
        {
            m.Id(r => r.emm_code);
        })
        .ServerOperation(true)
        .Read(r => r.Action("JobSchedule_Read", "JOBS").Data("passFilter"))
        .Create("JobSchedule_Create", "JOBS")
        .Update("JobSchedule_Update", "JOBS")
        .Destroy("JobSchedule_Delete", "JOBS")
    )
)

 

 Here is JS code for passFilter function

 

function passFilter() {
    var statusCheckBoxesValues = "";

    var area = $("#areaDropDownList").data("kendoDropDownList").value();
    var dispatch = $("#dispatchDropDownList").data("kendoDropDownList").value();
    var assignto = $("#techDropDownList").data("kendoDropDownList").value();
    var category = $("#categoryDropDownList").data("kendoDropDownList").value();
    var product = $("#productDropDownList").data("kendoDropDownList").value();
    var proditem = $("#itemDropDownList").data("kendoDropDownList").value();
    var filter = $("#sortFilterDropDownList").data("kendoDropDownList").value();
    var datefrom = $("#fromDatePicker").val();
    var dateto = $("#toDatePicker").val();

    return {
        ip_cond: "opq2",
        ip_area: area == "" ? "[All]" : area,
        ip_dispatch: dispatch == "" ? "[All]" : dispatch,
        ip_assignto: assignto == "" ? "[All]" : assignto,
        ip_category: category == "" ? "[All]" : category,
        ip_product: product == "" ? "[All]" : product,
        ip_proditem: proditem == "" ? "[All]" : proditem,
        ip_streetno: "",
        ip_filter: filter == "" ? "[All]" : filter,
        ip_datefrom: datefrom == "" ? null : datefrom,
        ip_dateto: dateto == "" ? null : dateto,
        ip_unsched: false,
        ip_contr_only: false,
        ip_quote: false
    }
}

 

Here is C# code

public JsonResult JobSchedule_Read([DataSourceRequest] DataSourceRequest request, string ip_cond, string ip_area, string ip_dispatch, string ip_assignto, string ip_category, string ip_product, string ip_proditem, string ip_streetno, string ip_filter, DateTime? ip_datefrom, DateTime? ip_dateto, bool ip_unsched, bool ip_contr_only, bool ip_quote)
{
    DateTime startDateTime;
    DateTime endDateTime;
    List<TaskViewModel> tasks = new List<TaskViewModel>();

    List<JscMstr> JscMstr;
    List<JhMstr> JhMstr;
    List<JdDet> JdDet;
    List<JscDet> JscDet;
    List<CoMstr> CoMstr;
    List<CodDet> CodDet;
    List<JrSumm> JrSumm;
    List<CsMstr> CsMstr;
    List<HhStatus> HhStatus;
    List<HhSumm> HhSumm;
    List<GrJscMstr> GrJscMstr;
    JobRepository jr = new JobRepository();

    DateTime dateFrom = ip_datefrom == null ? DateTime.Today : (DateTime)ip_datefrom;
    DateTime dateTo = ip_dateto == null ? DateTime.Today : (DateTime)ip_dateto;

    jr.GetJobs(ip_cond, ip_area.ToLower(), ip_dispatch.ToLower(), ip_assignto.ToLower(), ip_category.ToLower(), ip_product.ToLower(), ip_proditem.ToLower(), ip_streetno, ip_filter, dateFrom, dateTo, ip_statlist, ip_unsched, ip_contr_only, ip_quote, out JscMstr, out JhMstr, out JdDet, out JscDet, out CoMstr, out CodDet, out JrSumm, out CsMstr, out HhStatus, out HhSumm, out GrJscMstr);

    foreach (var item in JscDet)
    {
        startDateTime = SchedulerUtility.GetDateTimeFromSeconds(item.jsd_sch_date, item.jsd_sch_start_time);
        endDateTime = SchedulerUtility.GetDateTimeFromSeconds(item.jsd_sch_date, item.jsd_sch_end_time);
        tasks.Add(new TaskViewModel()
        {
            TaskID = item.jsd_jobno,
            TechName = item.jsd_sch_assto,
            emm_code = item.jsd_sch_assto,
            Title = "Job Title (" + item.jsd_jobno + item.jsd_lineno + item.jsd_schno + ")",
            Start = new DateTime(startDateTime.Year, startDateTime.Month, startDateTime.Day, startDateTime.Hour, startDateTime.Minute, startDateTime.Second),
            End = new DateTime(endDateTime.Year, endDateTime.Month, endDateTime.Day, endDateTime.Hour, endDateTime.Minute, endDateTime.Second),
            Description = "Description 101",
            IsAllDay = false
        });
    }

    return Json(tasks.ToDataSourceResult(request));
}

  

public ActionResult Techs()
{
    ComboUtility er = new ComboUtility();
    List<EmMstr> assignToList = new List<EmMstr>();

    assignToList = er.LoadEmployee(true);

    return Json(assignToList, JsonRequestBehavior.AllowGet);
}

 

Here is my Kendo UI code for scheduler. It's not working and throws "500 (Internal Server Error)" in browser console

 

 

$("#recreateButton").on("click", function () {

    var statusCheckBoxesValues = "";

    var area = $("#areaDropDownList").data("kendoDropDownList").value();
    var dispatch = $("#dispatchDropDownList").data("kendoDropDownList").value();
    var assignto = $("#techDropDownList").data("kendoDropDownList").value();
    var category = $("#categoryDropDownList").data("kendoDropDownList").value();
    var product = $("#productDropDownList").data("kendoDropDownList").value();
    var proditem = $("#itemDropDownList").data("kendoDropDownList").value();
    var filter = $("#sortFilterDropDownList").data("kendoDropDownList").value();
    var datefrom = $("#fromDatePicker").val();
    var dateto = $("#toDatePicker").val();

    var schedulerElement = $("#schedulerJob");
    var scheduler = schedulerElement.data("kendoScheduler");

    scheduler.destroy();
    schedulerElement.html("");

    schedulerElement.kendoScheduler({
        date: new Date("2015/9/30"),
        startTime: new Date("2015/9/30 07:00 AM"),
        height: 600,
        views: [
            "day",
            "week",
            { type: "timeline", selected: true }
        ],
        timezone: "Etc/UTC",
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: "/JOBS/JobSchedule_Read",
                    dataType: "json"
                },
                update: {
                    url: "/JOBS/JobSchedule_Update",
                    dataType: "jsonp"
                },
                create: {
                    url: "/JOBS/JobSchedule_Create",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "/JOBS/JobSchedule_Delete",
                    dataType: "jsonp"
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return {
                            models: kendo.stringify(options.models),
                            ip_cond: "opq2",
                            ip_area: area == "" ? "[All]" : area,
                            ip_dispatch: dispatch == "" ? "[All]" : dispatch,
                            ip_assignto: assignto == "" ? "[All]" : assignto,
                            ip_category: category == "" ? "[All]" : category,
                            ip_product: product == "" ? "[All]" : product,
                            ip_proditem: proditem == "" ? "[All]" : proditem,
                            ip_streetno: "",
                            ip_filter: filter == "" ? "[All]" : filter,
                            ip_datefrom: datefrom == "" ? null : datefrom,
                            ip_dateto: dateto == "" ? null : dateto,
                            ip_statlist: statusCheckBoxesValues == "" ? "DB" : statusCheckBoxesValues,
                            ip_unsched: false,
                            ip_contr_only: false,
                            ip_quote: false
                        };
                    }
                }
            },
            schema: {
                model: {
                    id: "emm_code"
                }
            }
        },
        group: {
            resources: ["Techs"],
            orientation: "vertical"
        },
        resources: [
            {
                field: "emm_code",
                name: "emm_code",
                dataSource: {
                    transport: {
                        read: {
                            url: "/JOBS/Techs",
                            dataType: "json"
                        }
                    },
                },
                title: "Techs"
            }
        ]
    });
});

 

 In my case I need to apply grouping to the scheduler on the fly. That's why I am destroying and then recreating the scheduler. Please I need to know what's wrong in Kendo UI scheduler code here.

 

 

Thanks in advance.

 

 

 

[Vladimir Iliev]

Hi Kevork,  

Please note that by default the MVC Controllers accept only "POST" requests - that you should set all CRUD operations "type" option to "POST". This can be easily done by setting the dataSource "type" option to "aspnetmvc-ajax" as shown below:

dataSource: {
         type: "aspnetmvc-ajax",

Regards,
Vladimir Iliev
Telerik

 

 

[Kevork]

This didn't work. Here is my updated code.

 

$("#recreateButton").on("click", function () {

    var statusCheckBoxesValues = "";

    var area = $("#areaDropDownList").data("kendoDropDownList").value();
    var dispatch = $("#dispatchDropDownList").data("kendoDropDownList").value();
    var assignto = $("#techDropDownList").data("kendoDropDownList").value();
    var category = $("#categoryDropDownList").data("kendoDropDownList").value();
    var product = $("#productDropDownList").data("kendoDropDownList").value();
    var proditem = $("#itemDropDownList").data("kendoDropDownList").value();
    var filter = $("#sortFilterDropDownList").data("kendoDropDownList").value();
    var datefrom = $("#fromDatePicker").val();
    var dateto = $("#toDatePicker").val();

    var schedulerElement = $("#schedulerJob");
    var scheduler = schedulerElement.data("kendoScheduler");

    scheduler.destroy();
    schedulerElement.html("");

    schedulerElement.kendoScheduler({
        date: new Date("2015/9/30"),
        startTime: new Date("2015/9/30 07:00 AM"),
        height: 600,
        views: [
            "day",
            "week",
            { type: "timeline", selected: true }
        ],
        timezone: "Etc/UTC",
        dataSource: {
            type: "aspnetmvc-ajax",
            batch: true,
            transport: {
                read: {
                    url: "/JOBS/JobSchedule_Read",
                    dataType: "json"
                },
                update: {
                    url: "/JOBS/JobSchedule_Update",
                    dataType: "json"
                },
                create: {
                    url: "/JOBS/JobSchedule_Create",
                    dataType: "json"
                },
                destroy: {
                    url: "/JOBS/JobSchedule_Delete",
                    dataType: "json"
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return {
                            models: kendo.stringify(options.models),
                            ip_cond: "opq2",
                            ip_area: area == "" ? "[All]" : area,
                            ip_dispatch: dispatch == "" ? "[All]" : dispatch,
                            ip_assignto: assignto == "" ? "[All]" : assignto,
                            ip_category: category == "" ? "[All]" : category,
                            ip_product: product == "" ? "[All]" : product,
                            ip_proditem: proditem == "" ? "[All]" : proditem,
                            ip_streetno: "",
                            ip_filter: filter == "" ? "[All]" : filter,
                            ip_datefrom: datefrom == "" ? null : datefrom,
                            ip_dateto: dateto == "" ? null : dateto,
                            ip_statlist: statusCheckBoxesValues == "" ? "DB" : statusCheckBoxesValues,
                            ip_unsched: false,
                            ip_contr_only: false,
                            ip_quote: false
                        };
                    }
                }
            },
            schema: {
                model: {
                    id: "emm_code"
                }
            }
        },
        group: {
            resources: ["Techs"],
            orientation: "vertical"
        },
        resources: [
            {
                field: "emm_code",
                name: "emm_code",
                dataSource: {
                    type: "aspnetmvc-ajax",
                    transport: {
                        read: {
                            url: "/JOBS/Techs",
                            dataType: "json"
                        }
                    },
                },
                title: "Techs"
            }
        ]
    });
});

[Vladimir Iliev]

Hello Kevork,

Could you please check that the "kendo.aspnetmvc.min.js" script is included in the project? If it's already included could you please prepare runable example where the issue is reproduced and send it back to us for further investigation? 

Regards,
Vladimir Iliev
Telerik

[Kevork]

"prepare runable example" isn't working. No page exists.

[Kevork]

OK, got it. The URL wasn't right. I'll reproduce the scheduler in JSBIN. Anyway kendo.aspnetmvc.min.js is included in the project.

[Vladimir Iliev]

Hello Kevork,

I updated the link in my previous reply for your convenience. 

Regards,
Vladimir Iliev
Telerik