Log in to start a topic

FlexFilter with preserved filter definition

Posted by: brijeshkumar.marand on 11 May 2018, 2:27 am EST

  • brijeshkumar.marand

    • Post Options:
    • Link
      Copy

    Posted 11 May 2018, 2:27 am EST

    Hello,

    I have implemented the filter definition preserve for a grid inside AngularJS component. This Grid is filled from collection after getting data from an API call like,

    dataService.getData().then(function (result) {
    this.dataSource = new wijmo.collections.CollectionView(result.data);
}

    I am using an API to store the filter definition data, though this data is already fetched and stored in local variable. And I have added control ‘flexGrid’ in html wijmo. For adding the filter, I have tried putting the below code under the dataSource collection, but the filter is cleared due to itemsSourceChanged event handler for filter clear. Even I tried, adding the code in the grid initialized handler and itemsSourceChanged grid event handler, but it behaved in same way.

    ```

    this.flexFilter = new wijmo.grid.filter.FlexGridFilter(this.flexGrid);

    this.flexFilter.filterColumns = that.filterColumns;

    var filterDefinition = apiService.getFilter();

if (angular.isDefined(filterDefinition)) {
    that.flexFilter.filterDefinition = filterDefinition;
}

that.flexFilter.filterApplied.addHandler(function () {
    apiService.setFilter(that.flexFilter.filterDefinition);
});

    
I tried removing the handler, but this is removing the handler:
    that.flexGrid.itemsSourceChanged.removeHandler(that.flexGrid.clear);

Then I also tried it by this way:
    ```
var index = that.flexGrid.itemsSourceChanged._handlers.findIndex(function (handler) {
        return handler.self === undefined;
    });
    that.flexGrid.itemsSourceChanged._handlers.splice(index, 1);

    By doing this the filter is preserved, but when setting the filter from UI, it shows the filtered column data. So, I am not able to revert the filters by unsetting the data. Even clear button is not working.

    Can someone help me with this?

    Thanks,

    Brijesh

  • abhishek.dutta

    Posted 14 May 2018, 1:20 am EST

  • brijeshkumar.marand

    Posted 15 May 2018, 1:23 am EST

    Hi Abhishek,

    Thanks for reply.

    All these examples are of Angular version 2 or higher. I am working with Angular 1.x.

    I tried almost all suggested approaches. Only 1 seem to work out:

    https://www.grapecity.com/en/forums/wijmo/flex-grid-filters-not-gett

    This uses timeout. This way the itemsSourceChanged event handler for clear filter will not be bound to that event, so it doesn’t cause problem. And then the filter code will be executed.

    That doesn’t sound like a solution to me as it is delaying the execution. Is it the standard way of handling the problem?

    I needed a proper way to fix this issue.

    Thanks in advance.

    Regards,

    Brijesh

  • manish.gupta

    Posted 16 May 2018, 9:52 am EST

    Hi Brijesh,

    Could you please share the build version you are using. Also, please try to apply filter while you are changing itemsSource.

    We would suggest you to not change complete itemsSource if it is not needed. You may change records by changing CollectionView sourceCollection. Please refer to the following code snippet:

    /* this.dataSource is instance of CollectionView */
dataService.getData().then(function (result) {
    this.dataSource.sourceCollection = result.data;
    this.dataSource.refresh();
}

    It would be great if you may share a demo sample.

    ~Manish

  • brijeshkumar.marand

    Posted 28 May 2018, 8:46 am EST

    Hi Manish,

    I am using build number 5.20173.403. And I am not able to reproduce the problem in demo app (I will post once I get it working).

    Though I have tried your suggestion like, changing only the sourceCollection, but that didn’t work.

    And I have also tried applying filter while changing the itemsSource in here after the data source, if that is what you meant. (As of now, I have the filter code in itemsSourceChanged handler.)

    /* this.dataSource is instance of CollectionView */
dataService.getData().then(function (result) {
    this.dataSource.sourceCollection = result.data;
    this.dataSource.refresh();

    this.flexFilter = new wijmo.grid.filter.FlexGridFilter(this.flexGrid);
    this.flexFilter.filterColumns = that.filterColumns;

    var filterDefinition = apiService.getFilter();

    if (angular.isDefined(filterDefinition)) {
        that.flexFilter.filterDefinition = filterDefinition;
    }

    that.flexFilter.filterApplied.addHandler(function () {
        apiService.setFilter(that.flexFilter.filterDefinition);
    });
});

    I cannot do it like that because I would not have the ‘this.flexGrid’ at that time. It is undefined.

    I recently discovered that with the $timeout implementation I am able to save and retrieve the filter definition when a single page is there. But, while moving between the ‘ui-view’, the grid prototype ‘onItemsSourceChanged’ is called that invokes the flexFilter clear handler, but not the ‘itemsSourceChanged’ handler defined from grid UI. Then the default filter is applied and saved to preserved data from the ‘filterApplied’ handler. This way the stored filter is again overridden when working with different ui-views.

    Thanks,

    Brijesh

  • brijeshkumar.marand

    Posted 28 May 2018, 9:20 am EST

    Hello,

    I have added the example which has this problem. This might not have the wijmo versions that we are using in our application. I have copied one app and changed it a bit.

    FlexGridFilter.zip

    This includes $timeout and it works with that. Though as mentioned above there still is problem with ‘ui-view’ which is not covered in this example. I have added delay of ‘10000’ to get the real-time effect of API results, so it takes time loading the data.

    Please suggest a better solution.

    Thanks,

    Brijesh

  • manish.gupta

    Posted 29 May 2018, 3:04 am EST

    Hi,

    If you want to preserve filter, then change the sourceCollection of existing collectionView instead of creating new collectionView.

    Alternatively, you can save the filter definition before changing the itemSource and then assign the filter definition after changing the itemSource. You can use itemsSourceChanged event handler of FlexGrid to do so.

    Please refer to following code snippet:-

    /*save current filter def */
var filterDef=$scope.filter.filterDefinition;
/*add handler to restore filter */
flexGrid.itemsSourceChanged.addHandler(()=>{
 
$scope.filter.filterDefinition=filterDef;
 
});
/* load new data*/
loadData().then(data=>{
 
$scope.data=new wijmo.collection.CollectionView(data);
$scope.$apply();
 
});

    You can also Refer to the attached updated sample which implements the same.

    ~Manish

    FlexGridFilter.zip

  • brijeshkumar.marand

    Posted 30 May 2018, 4:42 am EST

    Hi Manish,

    Thanks for sharing this solution. The example you have provided is done using buttons. But as per our requirement, we need to do this as an automatic process.

    Like, by default there will not be any filter. When user changes any filter settings, save the filter. And whenever user comes back, apply the filter definition.

    I have added the example with ui-router.

    FlexGridFilter.zip

    I have added the filter in the getData(), as initialized is called before the data is loaded and then it overrides the filter. The current implementation works for the same state.

    If change the state from ‘state1’ to ‘state2’, this settings are again set to default from the ‘filterApplied()’ handler.

    Thanks,

    Brijesh

  • manish.gupta

    Posted 31 May 2018, 8:00 am EST

    Hi,

    In your use case, it would be better to use filterChanged event then filterApplied as it isn’t fired as often as filterApplied.

    $scope.filter.filterChanged.addHandler((e)=>{
localStorage['filterDef'] = $scope.filter.filterDefinition;
console.log("f changed");
});

    You may also refer to the attached updated sample.

    ~Manish

    FlexGridFilter.zip

  • brijeshkumar.marand

    Posted 1 June 2018, 3:51 am EST

    Hi Manish,

    That solved my problem.

    Thanks for the help.

    ~Brijesh

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.