Forums Home / Wijmo / General Discussion
Posted by: slav on 14 September 2017, 2:14 am EST
slav
Posted 14 September 2017, 2:14 am EST
Previously I was utilizing FlexGrid.itemsSource.filter to filters results before built-in filters was release. I would like to know if it possible to add in custom filters conditions to the FlexGridFilter? Basically, I have some drop down boxes that are used for filtering and I would like to still be able to filter with those boxes, but also use built-in filters.
ashishjindal
Posted 14 September 2017, 2:14 am EST
Hello Slav,
I reworked on it and found the cause. Since, we are manually defining the filter on the CollectionView, it overrides the built in filtering and hence, it does not work. But, you can have builtin filtering and custom filtering together by setting the filter using FlexGridFilter class manually like this:
[js]
if ($scope.filter) {
//get the column on which you wish to apply filter
var columnFilter = flex.columns[3];
//clear the current filter
flexGridFilter.clear();
//get an instance of condition filter
var conditionFilter = flexGridFilter.getColumnFilter(columnFilter, true);
//set the filter value
conditionFilter.condition1.value = $scope.filter;
//set the filter condition
conditionFilter.condition1.operator = wijmo.grid.filter.Operator.EQ;
//apply the filter
flexGridFilter.apply();
}
else
flexGridFilter.clear();
[/js]
Here is the updated sample.
slav
Posted 14 September 2017, 2:14 am EST
Would it be possible to increase the number of allowed conditions? Currently two is the limit, correct? We can have multiple settings selected that are designed to filter a single column (see image). The user can pick and choose any combination. Not really concerned with the UI seeing the filtered value, but just actually filtering the results.
ashishjindal
Posted 14 September 2017, 2:14 am EST
Hello,
I tried to use custom filter which applies filter on collectionView and built-in filter together and it worked correctly at my end. I have attached the updated sample.
Can you check and let me know if you are face any issue ?
slav
Posted 14 September 2017, 2:14 am EST
The filter with the input works for me, but the the filters in the headers do nothing. Am I missing something? I attached a couple images.
bernardo
Posted 14 September 2017, 2:14 am EST
Hello Slav
This is certainly possible using the CollectionView. The cv.filter property defines a function, so you can create any conditions you want.
In your example, I assume you want to show all items that are either “complete” or “ready to ship”.
I don’t know how you store this representation, but if it is a simple enum or a string, then your filter function could be something like this:
[js]cv.filter = function(item) {
if (chkComplete.value && item.state == “Complete”) return true;
if (chkReady.value && item.state == “Ready”) return true;
// etc…
return false;
}[/js]
I hope this helps. If I missed the point of the question, please let me know and I’ll try again.
Thanks.
slav
Posted 14 September 2017, 2:14 am EST
Well, yes you can use the collectionview filter however the issue Ashish demonstrated a work around for was that using CV filters override built-in filters; however, I want to use both filter types at the same time. In our scenario, we have more than 2 conditions so using Ashish’s approach won’t work for us currently. have any thoughts?
bernardo
Posted 14 September 2017, 2:14 am EST
I think I misunderstood the question, sorry about that.
If you want to apply your own filter to the data, and then have the FlexGridFilter act on the result set of the first filter, you can simply:
a) generate the data
b) apply the first filter using your custom function
c) use the result set (cv.items) as the itemsSource for the grid.
This fiddle demonstrates:
http://jsfiddle.net/Wijmo5/g8d6wsbc/
The code is commented, I hope this time I got it right 
slav
Posted 14 September 2017, 2:14 am EST
Your example does work well. However, I don’t use angular JS directives, but instead mostly pure JS. I created a forked fiddle to demonstrate my issue (both filters are not working):
http://jsfiddle.net/g5okm177/4/
In your fiddle you have
[js]$scope.filteredData = $scope.data.items;[/js]
Should this not be $scope.data because the itemsSource should point to a collection view not the items within the CV? Changing your fiddle to point to $scope.data works fine – both filters work, but in my fiddle both filters only work when I do:
[js]$scope.flexGrid.itemsSource = $scope.data.items;[/js]
But, this is not correct because now the itemsSource points to any array of items instead of a CV object.
bernardo
Posted 14 September 2017, 2:14 am EST
Hello Slav
Your fiddle was very close. It will work if you set the grid’s itemsSource to $scope.data.items, as shown below:
[js]// when the “filter” string changes, apply the filter and update
// the ‘filteredData’ collection used as the grid’s itemsSource:
$scope.$watch(‘filter’, function() {
$scope.data.refresh();
$scope.flexGrid.itemsSource = $scope.data.items;
});[/js]
The reason this works is that the grid does accept regular arrays as item sources as well. In this case, it creates an internal CollectionView that is used to sort the data. This internal CollectionView is exposed by the grids “collectionView” property. The FlexGridFilter uses this internal collection view for filtering as well.
So the way this works is
I made a new fiddle without AngularJS for you:
http://jsfiddle.net/Wijmo5/h1njyaez/
I hope this clarifies things.
slav
Posted 14 September 2017, 2:14 am EST
Thank you, you have been very helpful on all my posts.
bleemus
Posted 14 September 2017, 2:14 am EST
I’ve followed this discussion so far, and it’s super useful.
However, I’m having trouble using Bernardo’s proposed solution in a context where I want to track changes that the user makes to the (filtered) values in the grid, and upload those changes to a server.
In the plunkr example, the grid’s itemSource is set to a simple array, not a collectionView. I can’t find any way to track changes or subscribe to the itemsAdded/itemsRemoved/itemsChanged events of the “internal collectionView (CV2)” that Bernardo mentioned (since this is internal, I imagine that this is by design).
Is there a way to tweak this approach to meet this requirement? Or maybe a completely different approach is necessary? Or maybe it’s just impossible right now?
khappe
Posted 14 September 2017, 2:14 am EST
Hi Benardo,
What you proposed above works for the scenario. Apply a filter then bind the collectionview to the filtered data.
However, if we could customize(override) a valueFilter’s apply method then we could insert logic to handle our specific data scenario.
Right now I can use the changing event to load the filter editor with the correct data. I have also overridden the apply method temporarily to get the filter applied to the data. However, when the grid is reloaded the overridden apply method is created a new and it looses the capability to filter the data correctly.
Kevin Happe
manish-gupta1
Posted 14 September 2017, 2:14 am EST
Hello Andrew,
We apologize for the delayed response.
For tracking changes, you need to set trackChanges true of FlexGrid’s collectionView.
For your reference, please see the updated fiddle that implements the same.
Hello @Khappe,
Since you are overloading apply method, it will not perform default functionality. You need to define functionality for custom apply method. Custom apply method works on page reload and FlexGrid reload.
For your reference, please see the attached sample that implements the same.
If issue persists, please modify the attached sample depicting your issue so that we can debug and assist you accordingly.
In the sample apply method print cutom apply method in console.
Thanks,
Manish Kumar Gupta
2017/04/FlexGrid.zip
hoang-nguyen
Posted 14 September 2017, 2:14 am EST
I am sorry but do you have any example of how to use both flexgrid built-in filter and dialog based filtering in ionic/angular? Thank you very much.
manish-gupta1
Posted 14 September 2017, 2:14 am EST
Hello Hoang,
Please find the attached sample that implements the same in Angular 2.
Thanks,
Manish Kumar Gupta
2017/06/FlexGrid_globalFilter_columnFilter-1.zip
hoang-nguyen
Posted 14 September 2017, 2:14 am EST
Thank you Manish. This example show us use flexData for global search and filterData = flexData.items for flex-item-source. Yes, this work well except we lost all grouping display (I use GroupDescription) and formatItem because filterData is not a CollectionView of the grid but it is an array of data. How do I reserve the format and keep both searching methods? Thank you sir very much.
hoang-nguyen
Posted 14 September 2017, 2:14 am EST
Sorry Manish. Please ignore my previous question. I have found a work around. What I did was calling the setGridGrouping twice and it is working. Again. Thank you Manish.
Here is what I did:
getData() {
this.showLoading(‘Loading, please wait…’);
this.proCastDataSub = this.proCastData.loadData(this.baseUrl + this.queryParams)
.subscribe((pd: any) => {
this.dataCollection = new wjCore.CollectionView(pd);
this.dataCollection.filter = this._filterFunction.bind(this);
this.filterData = this.dataCollection;
this.dataCollection.collectionChanged.addHandler((s: wjCore.CollectionView, e: wjCore.EventArgs) => {
let groupDesc = this.filterData.groupDescriptions;
this.filterData = wjCore.asCollectionView(s.items); if (this.initLoad === false) { this.setGridGrouping(); this.initLoad = true; } else { if (groupDesc.length > 0 ) { this.filterData.groupDescriptions.clear(); for (let i = 0; i < groupDesc.length; i++) { if (this.findGroupDescription(groupDesc[i].propertyName) === false) { this.filterData.groupDescriptions.push(new wjCore.PropertyGroupDescription(groupDesc[i].propertyName)); } } } } }); this.setGridGrouping(); }, (error) => this.errorMessage = < any > error, () => this.dismmisLoading() );
}
setGridGrouping(): void {
let groupBy = ‘Superintendent’; // default group by
if (Library.isNullOrUndefined(this.currentUserView.viewData) === false && Library.isNullOrUndefined(this.currentUserView.viewData.groupBy) === false) {
groupBy = this.currentUserView.viewData.groupBy === ‘Sup’ ? ‘Superintendent’ : ‘TeamLeader’;
}
this.pushGroupDescription('BusinessUnitCode,' + groupBy);
}
manish-gupta1
Posted 14 September 2017, 2:14 am EST
Hello Hoang,
Please refer to the following forum thread for grouping with global and column filter sample.
http://wijmo.com/topic/angular2flexgrid-column-filters-global-filter/#post-106042
If issue persists, please let us know.
Thanks,
Manish Kumar Gupta
hoang-nguyen
Posted 14 September 2017, 2:14 am EST
Thank you Manish.
craig
Posted 14 September 2017, 2:14 am EST
With reference to example implementation shared by Bernardo. There is a much cleaner alternative that uses a single DataCollection. In the new filter function for DataCollection, call the “_filter” function of FlexGridFilter. In case of JS example at http://jsfiddle.net/Wijmo5/h1njyaez/, this would be:
filter = dvFilter.value.toLowerCase(); var displayitem = f._filter(filter); // return type boolean
In case of Angular example at http://jsfiddle.net/g5okm177/4/, this would be:
var displayitem = $scope.flexGridFilter._filter(item); // return type boolean
This can then be combined with rest of the checks in filter function.
manish-gupta1
Posted 14 September 2017, 2:14 am EST
Hello Craig,
Thank you for your time and solution 
Thanks,
Manish Kumar Gupta
waheedahmed.hyder
Posted 20 November 2017, 9:07 am EST
Hi Manish,
but its removing the values from the filter instead of unchecking them and the single column country is not getting highlighted
what is we want to filter a column with multiple values and user can add or remove the filter from the colum?
can we do it?
thanks … Waheed
