Any Filtering event?

9 posts, 1 answers
  1. Courouble Damien
    Courouble Damien avatar
    54 posts
    Member since:
    Aug 2009

    Posted 09 Aug 2012 Link to this post

    Hi Guys,

    We're looking for a way to control the odata query when we set a filter on the grid.
    In fact our problem is that the grid is already bound to a datasource containing a $filter, (the odata query that populate the datasource and the grid is composed of a filter) so we can't add another one when trying to filtering the grid (Hope its clear enough)

    Is there a way to change datasource.read.url when filtering  ? Or a way to get an event once the filtering is activated and then change the datasource real url ?

    Any help/Advices on that could be great,

    Thanks in advance,

    Damien
  2. Answer
    John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 09 Aug 2012 Link to this post

    Hi Damien,

    You could add your own filtering event to the grid's dataSource.

    If you had a grid defined as follows:

    var grid = $("#grid").kendoGrid({
        dataSource: data,
        columns: [
            {
                field: "product",
                title: "Product"
            },
            {
                field: "control",
                title: "Control"
            }
        ],
        selectable: "row",
        filterable: true
    }).data("kendoGrid");

    You could override the grid dataSource's original filter function and raise your own filtering event before the original filter function is called:

    // Save the reference to the original filter function.
    grid.dataSource.originalFilter = grid.dataSource.filter;
      
    // Replace the original filter function.
    grid.dataSource.filter = function() {
        // If a column is about to be filtered, then raise a new "filtering" event.
        if (arguments.length > 0) {
            this.trigger("filtering", arguments);
        }
        // Call the original filter function.
        var result = grid.dataSource.originalFilter.apply(this, arguments);
        return result;
    }

    Then you could bind to the new filtering event and execute some code to change the dataSource read url:

    // Bind to the dataSource filtering event.
    $("#grid").data("kendoGrid").dataSource.bind("filtering", function() {
        console.log("about to filter.  change dataSource read url now.");
    });

    Attached is an example.

    Hope that helps.

    Regards,

    John DeVight
  3. Kendo UI is VS 2017 Ready
  4. Courouble Damien
    Courouble Damien avatar
    54 posts
    Member since:
    Aug 2009

    Posted 09 Aug 2012 Link to this post

    Thanks John 

    I think we got everything needed to continue.

    Thanks for the quick reply !

    Damien
  5. Brian Vallelunga
    Brian Vallelunga avatar
    88 posts
    Member since:
    May 2008

    Posted 11 Dec 2013 Link to this post

    This is an old post, but I'd like to put in my vote for a "filtering" or "filtered" event and the sorting equivalents.

    I have a "report" model that has filters and sorts that need to be in sync with the filters and sorts applied to a data source through the grid. The report is serialized to JSON by the transport in the parameterMap event and that is what is transmitted to the server.

    The problem is that even subscribing to the "change" event, I can't keep the two in sync because the change event fires after the data has been sent to the server. The ordering is currently this:

    1) Click filter icon in grid
    2) Change the filter
    3) Press "Filter" button
    4) Report data is serialized by the parameterMap function.
    5) Read request is sent to server
    6) Grid is updated
    7) Change event is fired

    I need a new data source event that fires after step #3 so I can keep the report filters in sync before they are used in step #4. The same is true for syncing.

    My current workaround is to perform the sync in the parameterMap function, but this doesn't feel right to me.

  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 13 Dec 2013 Link to this post

    Hello Brian,

    Please use our User Voice to post your suggestions and considerations. This is section is reviewed regularly and if your suggestion gets popular we will definitely consider implementing it.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Hunter
    Hunter avatar
    24 posts
    Member since:
    Jan 2014

    Posted 10 Jun 2014 Link to this post

    Best way to extend the DataSource.filter method that I've found.  It will trigger an event right before the filter is about to be applied.  Also you could imagine firing an event directly after a filter has been applied.  Also you can check for the filter being applied and if it is null or an empty object then you know that filter's have been cleared.  You could also check for special params to be passed in with the filter object in case you really want customized behavior.  Enjoy.  :)


    (function ($) {
        var originalFilter = kendo.data.DataSource.fn.filter;
     
        kendo.data.DataSource.fn.filter = function(e){
            if(arguments.length > 0){
                $.event.trigger('beforeFilter', [e, $(this)]);
            }
     
            return originalFilter.apply(this, arguments);
        };
    })(jQuery);



    Event Listener might look something like this:

    // pass    overrideEvent: true    into the filter object in order to avoid triggering this event
    //e.g.  dataSource.filter({ "field": "myField",  "operator" : "lt",  "value": '50', overrideEvent: true});
    $(document).on('beforeFilter', function(event, params, dataSource){
        if(params !== null && params.hasOwnProperty('overrideEvent') && params.overrideEvent === true){
            //typically do something different here
            //console.log('the thing did not fire');
        }else if(params !== null && $.isEmptyObject(params) === false){
            //a filter was applied
            filterNotifier.open();
        }else if(params === null || $.isEmptyObject(params) === true){
            //a filter was cleared
            filterNotifier.close();
        }
    });
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 12 Jun 2014 Link to this post

    Hello Curtis,

    Thank you very much for sharing your solution with us.

    I am sure that it will be helpful for many other users.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Simon
    Simon avatar
    159 posts
    Member since:
    Sep 2010
  10. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 16 Jun 2014 Link to this post

    Hello Simon,

    Thank you very much for the user voice.

    If it gets more popular we will definitely see it implemented in the future, as currently there are items in the UserVoice that are rated higher than the sort/filter events.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready