This is a migrated thread and some comments may be shown as answers.

Scheduler with Multiple Checkbox Filters

1 Answer 34 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
George
Top achievements
Rank 2
George asked on 25 Aug 2017, 05:33 PM

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.

1 Answer, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 29 Aug 2017, 12:51 PM
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.
Tags
Scheduler
Asked by
George
Top achievements
Rank 2
Answers by
Plamen
Telerik team
Share this question
or