Any Filtering event?

2 Answers 4505 Views

Grid

2 Answers, 1 is accepted

Accepted

answered on 09 Aug 2012, 01:47 PM

GridFilteringEvent.zip

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

Courouble Damien

commented on 09 Aug 2012, 01:50 PM

Thanks John

I think we got everything needed to continue.

Thanks for the quick reply !

Damien

Brian Vallelunga

commented on 11 Dec 2013, 03:02 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.

Kiril Nikolov

commented on 13 Dec 2013, 12:40 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!

Simon

commented on 13 Jun 2014, 02:13 PM

A uservoice suggestion has been created for this issue:

http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/5165704-add-sort-filter-events-for-datasource

Kiril Nikolov

commented on 16 Jun 2014, 11:25 AM

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!

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();

}

});

Kiril Nikolov

commented on 12 Jun 2014, 10:58 AM

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!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Any Filtering event?

2 Answers, 1 is accepted