Filter Event Does not Fire when using ServerFiltering

6 posts, 0 answers
  1. Beryl
    Beryl avatar
    19 posts
    Member since:
    Jul 2015

    Posted 19 May Link to this post

    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);
                  }
              },

  2. Georgi
    Admin
    Georgi avatar
    172 posts

    Posted 22 May Link to this post

    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.
  3. Beryl
    Beryl avatar
    19 posts
    Member since:
    Jul 2015

    Posted 22 May in reply to Georgi Link to this post

    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.
  4. Georgi
    Admin
    Georgi avatar
    172 posts

    Posted 23 May Link to this post

    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.
  5. Beryl
    Beryl avatar
    19 posts
    Member since:
    Jul 2015

    Posted 23 May in reply to Georgi Link to this post

    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);
                  }
              },

  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1968 posts

    Posted 24 May Link to this post

    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.
Back to Top