Any Filtering event?
2 Answers 1057 Views
Courouble Damien
Top achievements
Rank 1
Courouble Damien asked on 09 Aug 2012, 12:41 PM
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 Answers, 1 is accepted

Sort by
0
Accepted
John DeVight
Top achievements
Rank 1
answered on 09 Aug 2012, 01:47 PM
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
Thanks John 

I think we got everything needed to continue.

Thanks for the quick reply !

Damien
- by
Courouble Damien
Top achievements
Rank 1
on 09 Aug 2012, 01:50 PM
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.

- by
Brian Vallelunga
Top achievements
Rank 1
on 11 Dec 2013, 03:02 PM
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!
- by
Kiril Nikolov
Telerik team
on 13 Dec 2013, 12:40 PM
- by
Simon
Top achievements
Rank 1
on 13 Jun 2014, 02:13 PM
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!
 
- by
Kiril Nikolov
Telerik team
on 16 Jun 2014, 11:25 AM
0
Hunter
Top achievements
Rank 1
answered on 10 Jun 2014, 10:43 PM
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();
    }
});
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!
 
- by
Kiril Nikolov
Telerik team
on 12 Jun 2014, 10:58 AM
Tags
Grid
Asked by
Courouble Damien
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
Hunter
Top achievements
Rank 1
Share this question
or