Event fires when the grid data is filtered.
This event is firing only when you use local dataSource, because the filtering with remote dataSource needs to be done on the server side.
Parameters
Name | Type | Description |
---|---|---|
e | {object} | event data |
records | {object} | The records after the filtering. |
Examples
sample
<table id="grid"></table>
<script>
var grid, data = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria', CountryName: 'Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo LuÃs Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil', CountryName: 'Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England', CountryName: 'England' },
{ 'ID': 4, 'Name': 'Manuel Neuer', 'PlaceOfBirth': 'Gelsenkirchen, West Germany', CountryName: 'Germany' },
{ 'ID': 5, 'Name': 'James RodrÃguez', 'PlaceOfBirth': 'Cúcuta, Colombia', CountryName: 'Colombia' },
{ 'ID': 6, 'Name': 'Dimitar Berbatov', 'PlaceOfBirth': 'Blagoevgrad, Bulgaria', CountryName: 'Bulgaria' }
];
grid = $('#grid').grid({
dataSource: data,
columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ],
dataFiltered: function (e, records) {
records.reverse(); // reverse the data
records.splice(3, 2); // remove 2 elements after the 3rd record
}
});
</script>