This is a migrated thread and some comments may be shown as answers.

Kendo UI Scheduler conversion

6 Answers 83 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Kevork
Top achievements
Rank 2
Kevork asked on 02 Oct 2015, 02:34 AM

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.

 

 

 

6 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 05 Oct 2015, 09:53 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Kevork
Top achievements
Rank 2
answered on 05 Oct 2015, 10:32 PM

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"
            }
        ]
    });
});

0
Vladimir Iliev
Telerik team
answered on 07 Oct 2015, 08:26 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Kevork
Top achievements
Rank 2
answered on 07 Oct 2015, 09:52 PM
"prepare runable example" isn't working. No page exists.
0
Kevork
Top achievements
Rank 2
answered on 08 Oct 2015, 09:30 PM

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.

0
Vladimir Iliev
Telerik team
answered on 09 Oct 2015, 09:25 AM
Hello Kevork,

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

Regards,
Vladimir Iliev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Scheduler
Asked by
Kevork
Top achievements
Rank 2
Answers by
Vladimir Iliev
Telerik team
Kevork
Top achievements
Rank 2
Share this question
or