Filtering Kendo UI Grid using multiple dropdownlists

[Irving]

I have a Kendo UI MVC grid that I am trying to filter based on value of the drop down lists selected. The filtering can be on any combination of the 3 dropdownlists. I have created a javascript function to do the filtering on a change event, and I see the 3 different filters while looking in the console. However when it gets to the controller only the first filter value is used.

 

 

function filterChange() {
    var ddlBranchValue = $("#DropDownListBranches").data("kendoDropDownList").text();
    var ddlDoorValue = $("#DropDownListDoor").data("kendoDropDownList").text();
    var ddlApplicationValue = $("#DropDownListApplication").data("kendoDropDownList").text();
    var gridListFilter = { filters: [] };
    var gridDataSource = $("#trailerGrid").data("kendoGrid").dataSource;


    if ($.trim(ddlBranchValue).length > 0) {
        gridListFilter.filters.push({ field: "Branch", operator: "eq", value: ddlBranchValue });

    }
    if ($.trim(ddlDoorValue).length > 0) {
        gridListFilter.filters.push({ field: "Door_Type", operator: "eq", value: ddlDoorValue });
    }
    if ($.trim(ddlApplicationValue).length > 0) {
        gridListFilter.filters.push({ field: "Class_Code", operator: "eq", value: ddlApplicationValue });
    }

    gridDataSource.filter(gridListFilter);
    gridDataSource.read();


}


@(Html.Kendo().Grid<Trailer>()
                                                                .Name("trailerGrid")
                                                                        .EnableCustomBinding(true)
                                                                        .Columns(columns =>
                                                                        {
                                                                            columns.Bound(trailer => trailer.Branch).Width(40).Title("Location Name")
                                                                    .ClientFooterTemplate("Units Available: #=count#")
                                                                    .ClientGroupHeaderTemplate("Location Name: <a href=availability-contact>#=value #</a> (Units Available: #=count#)");
                                                                //columns.Bound(trailer => trailer.Trailer_Id).Width(40);
                                                                columns.Bound(trailer => trailer.Model).Width(40);
                                                                            columns.Bound(trailer => trailer.Length).Width(20);
                                                                            columns.Bound(trailer => trailer.Door_Type).Width(20);
                                                                            columns.Bound(trailer => trailer.Class_Code).Width(40).Title("Application");
                                                                            columns.Bound(trailer => trailer.Super_Spec).Width(20);
                                                                            columns.Bound(trailer => trailer.Major_Spec).Width(20);
                                                                        })
                                                                //.Pageable(p => p.Numeric(false).PreviousNext(false))
                                                                .Sortable()
                                                                //.Scrollable(s => s.Height(200))
                                                                .Scrollable(sc => sc.Endless(true))
                                                                .Filterable(filterable => filterable
                                                                    .Extra(false)
                                                                            .Operators(operators => operators
                                                                                .ForString(str => str.Clear()
                                                                                    .StartsWith("Starts with")
                                                                                    .IsEqualTo("Is equal to")
                                                                                    .IsNotEqualTo("Is not equal to")
                                                                        )))
                                                                .Groupable()
                                                                        .DataSource(dataSource => dataSource
                                                                            .Ajax()
                                                                            .Aggregates(aggregates => aggregates.Add(trailer => trailer.Branch).Count())
                                                                    .Group(groups => groups.Add(trailer => trailer.Branch))
                                                                    //.PageSize(20)
                                                                  .Read(read => read.Url(Url.Content("/web-interface/trailers"))))

                                                                .Events(events => events.DataBound("dataBound")))

[Boyan Dimitrov]

Hello,

I believe the problem here is that the filter object does not have a logic value on same level with filters array that contain all filter expressions. For example please take a look at the https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/filter#filter.filters example where there is a logic: or on root level. 

Regards,
Boyan Dimitrov
Progress Telerik