Angular 5 - Flex Grid Preserve Filtering

Posted by: feniksreborn on 12 March 2018, 11:25 pm EST

    • Post Options:
    • Link

    Posted 12 March 2018, 11:25 pm EST

    Hi,

    Angular 5,

    TypeScript,

    Wijmo : 5.20173.405

    I would like to preserve filtering in the flex grid component. For example, I want to filter the flex grid and after I find the item in the flex grid, I will navigate to the details page. But If I do Cancel on the details page, I will go back on the list of items, this should be filtered list of items.

    I have already tried the next code:

    
    
    
    <wj-flex-grid #flex [itemsSource]="data" (updatingView)="updatingView(flex,$event)">
        <wj-flex-grid-filter #filter></wj-flex-grid-filter>
    </wj-flex-grid>
    
    import * as wjcGridFilter from 'wijmo/wijmo.grid.filter';
    
    export class AppComponent {
        public data: wjCore.CollectionView;
        private savedInfo: Object;
        private _dataSvc: DataSvc;
        constructor( @Inject(DataSvc) _dataSvc: DataSvc) {
            this._dataSvc = _dataSvc;
            this.data = new wjCore.CollectionView(this._dataSvc.getData(10));        
        }
        
          @ViewChild('filter') public filter: wjcGridFilter.FlexGridFilter;
        ngAfterViewInit() {
            if (localStorage.getItem('saveInfo') !== null) {
                let savedInfo = JSON.parse(localStorage.getItem('saveInfo'));
            this.filter.filterDefinition = savedInfo.filter;  // ?? this.filter is always undefind ?????
            }
        }
        updatingView(s: wjGrid.FlexGrid, e: wjCore.CancelEventArgs) {
            this.savedInfo = {
                pageIndex: this.data.pageIndex,
                pageSize: this.data.pageSize,
                sortDescriptions: this.data.sortDescriptions,
                filter: this.filter.filterDefinition
            }
            localStorage.setItem('saveInfo', JSON.stringify(this.savedInfo));
        }
       
    }
    

    this.filter is always undefined.

    Can you provide me a plunker example how to do this properly?

    Thank you

  • Posted 13 March 2018, 3:57 pm EST

    Hi,

    We are sorry, we are unable to replicate the issue with same code to access Filter object from code.

    Please refer to the following plunker:

    http://plnkr.co/edit/XoxtE1SMsIiZJPQEJS0q?p=preview

    Please modify the plunker depicting your issue incase.

    ~Manish

  • Posted 13 March 2018, 6:50 pm EST

    Good morning,

    I have made a forked plunker:

    http://plnkr.co/edit/OQs9VZJlbqRrkvTaO4pK?p=preview

    Try next steps:

    1. Filter the grid for example by id, choose id 0 and id 1
    2. After that please click on the button “go to next page” - the next page is loaded
    3. After that please click on the button “Go Back” - we are back on the first page and the grid is not filtered anymore, it should preserve filtering.

    This is a just simple example, in real code we use routing to go to next page and go back is done with location.back(); - import { Location } from ‘@angular/common’;

    How to preserve filtering for described behavior? Any idea?

    Thank you

  • Posted 13 March 2018, 9:14 pm EST

    Hi,

    Thank you for updated code.

    this.filter is undefined in updatingView event handler. Please find updated plunker:

    http://plnkr.co/edit/JOuA7lmpJcOUUOxuElhq?p=preview

    ~Manish

  • Posted 13 March 2018, 9:20 pm EST

    Hi,

    The filter is undefined in ngAfterViewInit() method.

    And the plunker has the same issue.

    Than you

  • Posted 14 March 2018, 4:32 pm EST

    Hi,

    The filter do not get apply on Go Back button click since ngAfterViewInit method do not gets called at this time.

    To re-apply filter, you may use FlexGrid intialized event.

    There is some issue with re-applying filter using initialized and ngIf. We have forwarded this issue to the concerned team with tracking id :313344.

    We will let you know as we get any update on this.

    ~Manish

  • Posted 19 March 2018, 10:49 pm EST

    Hello,

    Any update on this issue?

    Thank you

  • Posted 20 March 2018, 9:04 pm EST

    Hi,

    We are prioritizing some issues for our licensed customers and we would like to include this case as well. However it seems that License Details are not updated for your Account.

    I have sent you an email from our Support Portal. Could you please share the details by replying the case, so that I can link them in our records and also prioritize the case.

    Thanks,

    Abhishek

  • Posted 2 April 2018, 10:20 pm EST

    Hi,.

    We are sorry for the delay.

    This was a bug for FlexGridFilter with CollectionView. This has been fixed and it will be included in pre-release builds after Apr 5.

    As a workaround, you need to reset CollectionView.filter property before applying filter.

    Please refer to the updated plunker for the same:

    http://plnkr.co/edit/6Ybz00XVJ2KIZRwSHTPe?p=preview

    ~Manish

Need extra support?

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

Learn More

Forum Channels