Client-Side Filtering on multiple dropdowns with fallback

2 posts, 0 answers
  1. Brandon
    Brandon avatar
    2 posts
    Member since:
    Aug 2015

    Posted 10 Aug 2015 Link to this post

    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​

  2.
  3. Brandon
    Brandon avatar
    2 posts
    Member since:
    Aug 2015

    Posted 10 Aug 2015 in reply to Brandon Link to this post

    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

Back to Top