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

Filter Event Does not Fire when using ServerFiltering

5 Answers 454 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Beryl
Top achievements
Rank 1
Beryl asked on 19 May 2017, 03:14 PM

I am trying to capture the filter event in my Kendo grid as we are saving grid state in Local storage using Angularjs.  Server-side filter works, but the "filter event" on the grid does not fire.  Is there something more I need to do? Here is a code snippet

              pageSize: 25,
              serverPaging: true,
              serverFiltering: true,
              serverSorting: true
          }),
          width: "100%",
          sortable: true,
          reorderable: true,
          pageable: true,
          columnMenu: false,
          resizable: true,
          filterable: true,
          filter: function(e) {
              if (e.filter == null) {
                  console.log   ("filter has been cleared");
              } else {
                  console.log(e.filter.logic);
                  alert(e.filter.filters[0].field);
                  console.log(e.filter.filters[0].operator);
                  console.log(e.filter.filters[0].value);
              }
          },

5 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 22 May 2017, 01:35 PM
Hello Beryl,

I tried to replicate your situation but It works as expected on my end. Check out the following dojo where I configured a grid matching your requirements.


You can use it as a reference and if you are not able to find the issue please send me the project or a sample where the issue appears so I can debug it locally your exact scenario and help you more efficiently.


Regards,
Georgi
Telerik by Progress
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.
0
Beryl
Top achievements
Rank 1
answered on 22 May 2017, 02:36 PM
Thanks for your answer but your Dojo is NOT using "ServerFiltering", it is using client filtering. My problem is trying to capture the serverFiltering event.
0
Georgi
Telerik team
answered on 23 May 2017, 03:01 PM
Hi Beryl,

Check out the following dojo which illustrates how to attach a function to the filter event while remote data binding and server side filtering.


If you open the developer tools of the browser and execute a filtering you will notice that the grid makes requests to the server on each filtering. 

Furthermore it is possible to use some of the events of the data source. Check out the article bellow for more information about data source events.


Regards,
Georgi
Telerik by Progress
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.
0
Beryl
Top achievements
Rank 1
answered on 23 May 2017, 03:51 PM

Thanks for your help, but filter function is still not firing for me.  The only thing I can figure is the fact that I am using aspnetmvc.  I should have posted the entire code to begin with.  Here it is

 dataSource: new kendo.data.DataSource({
              transport: {
                  read: function (e) {
                      var grid = $scope.SearchGrid;
                      var requestObject = (new kendo.data.transports["aspnetmvc-server"]({ prefix: "" }))
                          .options.parameterMap({
                              page: grid.dataSource.page(),
                              sort: grid.dataSource.sort(),
                              filter: grid.dataSource.filter(),
                              pagesize: grid.dataSource.pageSize()
                
                  });
                      generalsearchService.submitSearch({ page: requestObject.page, sort: requestObject.sort, filter: requestObject.filter, pagesize: requestObject.pagesize, form: form })
                          .then(function success(response) {
                              e.success(response.data);
                          });
                    }
                },
                  schema: {
                      data: "Data",
                      total: "Total"
                  },
              pageSize: 25,
              serverPaging: true,
              serverFiltering: true,
              serverSorting: true
          }),
          width: "100%",
          sortable: true,
          reorderable: true,
          pageable: true,
          columnMenu: false,
          resizable: true,
          filterable: true,
          filter: function (e) {
              if (e.filter == null) {
                  console.log("filter has been cleared");
              } else {
                  console.log(e.filter.logic);
                  alert(e.filter.filters[0].field);
                  console.log(e.filter.filters[0].operator);
                  console.log(e.filter.filters[0].value);
              }
          },

0
Boyan Dimitrov
Telerik team
answered on 24 May 2017, 10:14 AM

Hello Beryl,

It is a bit weird, because I tested the exact same project I sent you in other form thread and the filter event is fired as expected. Please refer to the attached example. 

Regards,
Boyan Dimitrov
Telerik by Progress
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
Grid
Asked by
Beryl
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Beryl
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or