akveo
Adding filter change event
It would be great if you add filter change event. this may be usefull to track number of lines using datasource count in real time when user use filters
Are there any plans to add this feature @lexzhukov? I would like to use the built-in column filtering, but I have another component that needs to know when filtering has changed & get the new filtered data. If not, I supposed I'll need to take over handling of the filtering myself via setFilter.
Nevermind, I think that LocalDataSource.onChanged() suits my needs. Though it is not documented.
Ok, i could did it with your explanation, i did it in this way:
In the method ngOnInit, I added this code:
this.tableData.onChanged().subscribe((change) => {
if (change.action === 'filter' && !_.isEmpty(change.elements)) {
let filters = _.compact(_.pluck(change.filter.filters, 'search'));
let filterRows = change.elements;
let totalRows = this.tables[this.selectedTableId].rows;
if (_.isEmpty(filters)) {
// There is no filters, it means filters were deleted, so dont do any
return;
}
// Do whatever you want with the filter event
}
});
- this.tableData is the LocalDataSource.
How can I update a second filter based on the selection of the first? Every column has a list filter. For instance:
ID | Country | City | Company
1 | Italy | Milan | Alfa 2 | Italy | Rome | Beta 3 | France | Paris | Gamma
After I filter the Country ("Italy" for instance) row 3 disappears but the City filter is still ['Milan', 'Rome', 'Paris']
with this.source.onChanged().subscribe((change) => {
I am able to get the Country filter value but to update the second filter list I need to update the whole object
const updatedCitiesList = ['Milan', 'Rome'];
const newSettings = this.settings;
newSettings.columns.title.filter.config.list = updatedCitiesList;
this.settings = Object.assign({}, newSettings );
But this puts me in an infinite loop on the .onChanged() event.
@voidbrain In my case, I think this is good solution.
this.sub = this.source.onChanged().pipe(
filter(event => event.action === 'filter'),
).subscribe(event => {
console.log(event);
if (this.oldFilter !== JSON.stringify(event.filter)) {
this.oldFilter = JSON.stringify(event.filter);
this.source.getFilteredAndSorted().then(res => {
const newSettings = this.settings;
newSettings.columns.role.filter.config.list = listFilters.roleList;
newSettings.columns.gbm_name.filter.config.list = listFilters.gbmList;
newSettings.columns.department_name.filter.config.list = listFilters.departmentList;
this.settings = Object.assign({}, newSettings);
});
}
});