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. 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

  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top