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