Dynamic Databinding

[Kevork]

Hi,

I need to bind the datasource to ASP.NET MVC Scheduler dynamically. In my scenario, I have 5 dropdownlists. Users will select item from the dropdownlists and then click Search buton and the scheduler will load the result. How can I do that with javascript? 

 

Please see the attached image.

 

@(Html.Kendo().Scheduler<TaskViewModel>()
    .Name("schedulerJob")
    .Date(new DateTime(2015, 8, 31))
    .StartTime(new DateTime(2015, 8, 31, 7, 00, 00))
    .Height(600)
    .Views(views =>
    {
        views.TimelineView();
    })
    .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);
        })
        .Read("JobSchedule_Read", "JOBS")
        .Create("JobSchedule_Create", "JOBS")
        .Update("JobSchedule_Update", "JOBS")
        .Destroy("JobSchedule_Delete", "JOBS")
    )
)

 

  

public JsonResult JobSchedule_Read([DataSourceRequest] DataSourceRequest request)
{
    DateTime startDateTime;
    DateTime endDateTime;
    List<JscDet> JscDet = (List<JscDet>)Session["JobScheduleDateTime"];
    List<TaskViewModel> tasks = new List<TaskViewModel>();

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

​

Thanks in advance

[Georgi Krustev]

Hello Kevork,

I would suggest you check our "Basic Usage" demo. It shows how to build filter based on chosen people above the widget. Refer more specifically to the "change" handler attached to the checkboxes. The code uses Scheduler's dataSource to filter the result.

Regards,
Georgi Krustev
Telerik

[Kevork]

Thanks for the reply.

I have already used this filter to one of my another schedulers. This filter works in client side not in server side. But this time I need it in different way. I need to send the dropdownlist values to the Controller level and then build dataset and bind it to the schedule every time I click the search button. 

 

Thanks in advance.

[Georgi Krustev]

Hello Kevork,

thank you for the clarification. In this case, you will need to configure the widget to allow server filtering. You can find a way to do this following this "how-to" demo:

• http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/scheduler/how-to/server-filtering

Once the widget can perform server filtering, the approach described in the "Basic usage" demo will be applicable to your scenario.

Let me know if something is not clear.

Regards,
Georgi Krustev
Telerik

[Kevork]

I have solved this data binding from server side issue. Now it's working. Whenever I click the search button it requests for server side response and bind the data to the scheduler.

 

@(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));
    })
    .Editable(e => e.TemplateId("scheduleEditorID"))
    .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")
    )
)

 

$('#btnSearch').click(function () {
    var scheduler = $("#schedulerJob").data("kendoScheduler");
    scheduler.view(scheduler.view().name);
    $("#schedulerJob").data("kendoScheduler").resources[0].dataSource.read();
})

 

function passFilter() {

    var area = $("#areaDropDownList").data("kendoDropDownList").value();
    var dispatch = $("#dispatchDropDownList").data("kendoDropDownList").value();

    return {
        ip_area: area == "" ? "[All]" : area,
        ip_dispatch: dispatch == "" ? "[All]" : dispatch
    }
}

 

        public JsonResult JobSchedule_Read([DataSourceRequest] DataSourceRequest request, string ip_area, string ip_dispatch)
        {
            List<TaskViewModel> tasks = new List<TaskViewModel>();
......
......
            return Json(tasks.ToDataSourceResult(request));
        }