Scheduler with Multiple Checkbox Filters

2 posts, 0 answers
  1. George
    George avatar
    1 posts
    Member since:
    Sep 2016

    Posted 25 Aug 2017 Link to this post

    I have a scheduler built with MVC and I would like for the events to be filtered by multiple fields. I am having difficulty in setting the filter logic along with the operators in the javascript.

    Is there a way to filter by multiple values on a button click event?

    Here are my selections:

    <div id="tutors-listing">
        Tutors
        <div id="tutors">
            Adalhi<input type="checkbox" id="alex" aria-label="Alex" value="3">
            Annik<input type="checkbox" id="bob" aria-label="Bob" value="4">
            Bobby<input type="checkbox" id="charlie" aria-label="Charlie" value="5">
        </div>
    </div>
     
    <div id="subjects-listing">
        Subjects
        <div id="subjects">
            AES<input type="checkbox" id="1" value="AES">
            NURS<input type="checkbox" id="2" value="NURS">
            ENG<input type="checkbox" id="3" value="ENG">
            MED<input type="checkbox" id="4" value="MED">
        </div>
        <button type="button" id="filter">Filter</button>
    </div>

     

    And here is my javascript. I am having issues getting the classesChecked value to show:

    <script type="text/javascript">
        $(function () {
            $("#filter").click(function () {
     
                var tutorsChecked = $.map($("#tutors :checked"), function (checkbox) {
                    return parseInt($(checkbox).val());
                     
                });
     
                alert(tutorsChecked);
                 
                var filter = {
                    logic: "or",
                    filters: [
                        {
                            logic: "and",
                            filters: [
                                { field: "SUBJECT", operator: "eq", value: classesChecked }
                            ]
                        },
                        {
                            logic: "and",
                            filters: [
                                { field: "TutorID", operator: "gt", value: tutorsChecked }
                            ]
                        }
                    ]
     
                };
     
                var scheduler = $("#scheduler").data("kendoScheduler");
     
                scheduler.dataSource.filter(filter);
            });
        })
    </script>

     

    Is there a better method to filter these values and how can I see the multiple value selections? Thanks in advance.

  2. Plamen
    Admin
    Plamen avatar
    3079 posts

    Posted 29 Aug 2017 Link to this post

    Hi,

    You are filtering the datasource correctly with the filter function. If you want to show multiple values you will have to list the filter options according to the selected inputs and use the 'and' operator for them.

    Regards,
    Plamen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top