Client-Side Filtering on multiple dropdowns with fallback

[Brandon]

Hello I'm working on a ASP.NET MVC 5 project with the Telerik Scheduler and was hoping to get a little assistance here. I'm not finding too much documentation in regards to Client-Side (JavaScript) filtering. 

In addition to my Scheduler control, I have two additional controls which I would like to use to drive my scheduler: a Dropdown which cascades into a multi- select. (you select a single option from the dropdown, then multiple options in a multiselect).

I need to figure out how to filter my Scheduler control based on both of these, as well as having a default or "fallback" option - if nothing is selected. 

I have this code now, which works great for the multi-select. I had something similar for the dropdown but the issue I was having is when you select an option in the dropdown, I wasn't sure how to get it back to a 'no-selection' or 'default' fallback where it will go back to displaying all events. Also, is it possible to combine these two filters into one, or simplify this further?

   

$("#room").change(function (e) {
  var selected = $.map($("#room :selected"), function (option) {
    return parseInt($(option).val());
  });

  var filter = {
    logic: "or",
    filters: $.map(selected, function (value) {
      return {
        operator: "eq",
        field: "RoomID",
        value: value
      };
    })
  };

Thanks

Brandon​

[Brandon]

Here is a quick update of what I have done.

In my datasource, I have referenced a JavaScript function 'filterSchedule'.

  .DataSource(d => d
    .Model(m =>
    {
      m.Id(f => f.ID);
      m.Field(f => f.Title);
    })
    .Read(read => read.Action("Read", "Scheduler").Data("filterSchedule"))
    .Create("Create", "Scheduler")
    .Destroy("Destroy", "Scheduler")
    .Update("Update", "Scheduler")

)

 

Here is a bit of javascript where I read the two input boxes I have. I also needed some additional code to manually refresh both the page and the read data from the controller.

<script type="text/javascript">
  function filterSchedule() {
    var section = $("#sections").val();
    var rooms = $.map($("#room :selected"), function (option) {
      return $(option).val();
    });
    return {
      Section: section,
      Room: rooms
    };

  };
  $("#sections").change(function () {
    var scheduler = $("#scheduler").data("kendoScheduler");
    scheduler.dataSource.read();
    scheduler.view(scheduler.view().name);
  });
  $("#room").change(function () {
    var scheduler = $("#scheduler").data("kendoScheduler");
    scheduler.dataSource.read();
    scheduler.view(scheduler.view().name);
  });

</script>

This allows me to simply get these two objects in my controller like so:

 

public virtual JsonResult Read([DataSourceRequest] DataSourceRequest request, String Section, List<String> Room)

 In this controller I will include the logic for checking if these values are null, etc..

Anyway, I hope this will help anyone in the future who wishes to update their calendar based on one or more input boxes.

Cheers,
Brandon