Dropdown filter in scheduler toolbar

[Luke]

Is there a way to add a dropdown to filter events in the scheduler? I can't seem to find an example to accomplish this. Would this entail using a resource in the scheduler? I've added images of my scheduler and events. Each event is a leave request from a user and has a department id. I'd like to filter the scheduler with a drop down based on department id.

[Stoyan]

Hello Luke,

Based on the provided information it sounds to me that you need to bind the Scheduler to different server response based on the selected department. The following steps go through an approach that includes the selected value of a DropDownLIst in the Read request of the Scheduler's DataSource. This will enable you to filter the response by that value on the server:

1. Define a separate DropDownList that contains the departments
2. Subscribe to its Change event to force the Scheduler's DataSource to send a new read request when a new department is selected
3. Configure the Data configuration of the DataSource's Read Transport
4. Define the JavaScript function that will get the departments id and send the additional parameter to the server
   
   

DropDownList

@(Html.Kendo().DropDownList()
          .Name("department")
          .DataTextField("DepartmentName")
          .DataValueField("DepartmentID")
          .Events(e => e.Change("change"))
          .BindTo(new List<SelectListItem>() {
              new SelectListItem() {
                  DepartmentName = "Marketing",
                  DepartmentID= "1"
              },
              new SelectListItem() {
                  DepartmentName = "Sales",
                  DepartmentName = "2"
              }            
          })
    )

DataSource Read

.Read(read => read.Url(Url.Action("Read","LeaveRequest")).Data("additionalData"))

Additional Data Function

function additionalData(){
     var dropdown = $("#department").data("kendoDropDownList");
     var value = dropdown.value();
     return {  departmentId: value };
}

Change Event Handler

function change(e){
     var scheduler = $("#Calendar").data("kendoScheduler");
     scheduler.dataSource.read();
}

Read Action Method

public async Task<JsonResult> Read([DataSourceRequest] DataSourceRequest request, int departmentId){
     //filter the data here
}

I hope the information above is useful in the scenario at hand.

Regards,
Stoyan
Progress Telerik