how to get multi filtered values in javascript

[sandy]

Hi,

i have grid with few columns with multiple checkbox filters ( for my grid i have 4 columns with multicheckbox filters).

when i click a button( button is outside the grid)  i want to get all filtered values those are applied to kendo grid.

[Nikolay]

Hello Sandy,

I can suggest getting the filtered data using the dataSource.view() method.

var dataSource = $("#grid").data("kendoGrid").dataSource;
var filteredData = dataSource.view();

Please note this method returns the data items which correspond to the current page, filter, sort, and group configuration. 

In case you would like to get all Grid filtered data there 2 approaches depending if the server operations are enabled on not. When ServerOperation is enabled, all data operations like paging, sorting, grouping, etc. will be performed on the server-side. When they are disabled, those operations will be performed on the client and the entire data set will be available for the DataSource:

1. ServerOperation(false)

The following snippet can be used:

          var dataSource = $("#grid").data("kendoGrid").dataSource;
          var filters = dataSource.filter();
          var allData = dataSource.data();
          var query = new kendo.data.Query(allData);
          var data = query.filter(filters).data;
          console.log(data)

Please refer to the following Dojo demo I have prepared demonstrating this:

• https://dojo.telerik.com/uVisOtuX

2. ServerOperation(true)

Since the data is lazy loaded all pages will have to be traversed and a read request will be executed for each page. Please refer to the below Dojo where a sample approach is demonstrated for this:

• http://dojo.telerik.com/ukERujOD

Please note that the above Dojo demos declare jQuery Grid, however, the desired logic is in pure JS so it is entirely valid for HtmlHelper Grid.

Regards,
Nikolay
Progress Telerik

[sandy]

Hi Nikolay,

Thanks for your reply.

you are miss understood my question or may be from my side.

i want to get which filters am selected in java script.

suppose in 1st column am selected 2 check boxes

2nd column am selected 3 check boxes

in 3rd column am selected 1 check box.

so when i click a button i want to get all these filters ( the filters which is cheked grid columns) in javascript.

[sandy]

Hi Nikolay,

am resolved my issue using below javascript code.

 var dataSource = $("#Grid").data("kendoGrid").dataSource;
        var filter = dataSource.filter();
        let FilterdValues=[];
        $.each(filter, function (i, filters1) {
            if (filters1 != "and" && filters1 != "or") {
            $.each(filters1, function (j, filters2) {

               
                if (filters2.field != "" && filters2.logic != "and" && filters2.logic != "or") {
                    FilterdValues += [filters2.field, filters2.operator, filters2.value, ""];
                }
                else {
                    $.each(filters2, function (k, v) {
                        if (v != "or") {
                            for (x = 0; x < v.length; x++) {
                                if (v[x].field != "") {
                                    FilterdValues += [v[x].field, v[x].operator, v[x].value, ""];
                                }
                            }

                        }
                    });
                }
                });
            }
        });
        alert(FilterdValues);



here am facing another two chalenges.

so actually my requirement is if user applies some filters on few columns in grid. he wants to save his applied filters as default view when he again comes to that page. so here user will clicks save my view button , am saving those filters in database. so when user again comes to that page am loading those filters  through java script code. below is my code. the below code is working fine means filters are applying to grid.

 var url = "Home/GetMyPageView";
        $.get(url, null, function (data) {
            alert(data);
            var filters = data.split(',');
            var dataSource = $("#Grid").data("kendoGrid").dataSource;
            var _fltMain = [];
            var _flt = { logic: "or", filters: [] };
            for (var i = 0; i < filters.length; i++) {
                var filtercount = filters.length - 1;
                if ((i % 3) == 0 && i < filtercount) {
                    _flt.filters.push({ field: filters[i], operator: filters[i + 1], value: filters[i + 2] });
                }
            }
            //$.each(selectedData, function (i, x) {
            //    _flt.filters.push({ field: "ProjectName", operator: "contains", value: x });
            //})
            _fltMain.push(_flt);
            dataSource.query({ filter: _fltMain });
            
            //$("#rData").html(data);
        });



so here is my list of two issues.

1) when am applying my filters through JavaScript those are applying but those values are not selected in grid column multi checkbox filter.

2) after applying filters the sum functionality is not working measn sum of columns are not displaying in grid footer. if i am not applying then sum functionality is working fine.



below am attaching image which describes my issue and also am attaching my project code. 

Please do changes in my project then it should help me lot.



https://drive.google.com/file/d/1DN2gE6gYBubNNabYm1RqNzza92U2xdV2/view?usp=sharing

[Nikolay]

Hi Sandy,

Thank you for sharing the code with me.

Please note this is a forum post and it will be available to the public. If you would like I can remove it for you. Let me know.

Nevertheless, I examined the project and placed some changes that fixed both problems.

1. The correct way to apply a client-side filter is via the data source filter method so instead of this:

dataSource.query({ filter: _fltMain });

I applied this:

dataSource.filter(_fltMain)

2. The checkbox filter is built-in via

Filterable(ftb => ftb.Multi(true))

So I removed the FilterMenuInit handler.

Please find the revised project attached to my reply.

As a side note please note only one inquiry is allowed per thread. This allows us to better keep track of the tickets and provide a shorter response time.

Regards,
Nikolay
Progress Telerik