Timing problem: Applying a wj-flex-grid-filter from localstorage

Posted by: andreas.knuth on 30 August 2018, 12:21 am EST

    • Post Options:
    • Link

    Posted 30 August 2018, 12:21 am EST

    Hi,

    I’m using the actual version of Flexgrid and Angular5/6. Trying to apply a filter (saved in the localstorage) leads to timing problems:

    → init is bound to the (initialize) event of the grid

    
    ...
    @ViewChild('filter') filter: wjcGridFilter.FlexGridFilter;
    ...
    init($event){
      let data = await this.http.get(url);
      this.data = new wjcCore.CollectionView(data); //data is bound to the [itemsSource]
      this.filter.filterDefinition = localStorage['filter']; 
    }
    
    

    does not work … putting the filterDefinition inside a setTimeout() works.

    
    setTimeout(()=>{
       this.filter.filterDefinition = localStorage['filter']; 
    },0);
    
    

    … not realy trustworthy (probably dependant on the computer used) - is there any other guaranteed callback to use for applying the filterDefinition.

    cheers,

    Andreas

  • Posted 30 August 2018, 4:43 pm EST

    Hi,

    The problem is arising because you are assigning a new value to this.data(bounded to itemsSource), i.e you are changing the itemsSource of the grid and whenever the new source is assigned to the grid it resets itself to default values and hence clearing the just applied filterDefinition.

    To avoid this you may use any of the following approaches however first is the recommended one:-

    1). Don’t change the grid source.

    What it means that assign an instance of CollectionView (can also be empty if data is not available) to grid’s itemsSource then whenever you need to change data assign new data to the sourceCollection property of CollectionView.

    Please refer to the following code snippet:-

    <wj-flex-grid #flex
    [itemsSource]="data"
    (initialized)="init(flex, filter)"
    >
    .....some columns defs
    <wj-flex-grid-filter #filter></wj-flex-grid-filter>
    </wj-flex-grid>
    //in equivalent ts file
    constructor(private http: HttpClient){
    	this.data = new wjcCore.CollectionView();
    }
    async init(flex, filter){
    	let data = await this.http.get(url).toPromise();
    	//assign data to collectionView's sourceCollection property
    	this.data.sourceCollection = data;
    	//set filter def
    	filter.filterDefinition = localStorage['filter'];
    }
    

    2). Handle grid’s itemsSourceChanged event to re-apply filter def when itemsSource changes

    Please refer to the following code snippet:-

    //equivalent ts file
    async init(flex, filter){
    	//handle itemsSourceChanged event to set filterDefinition
    	flex.itemsSourceChanged.addHandler((s,e)=>{
    		filter.filterDefinition = localStorage['filter'];
    	});
    	let data = await this.http.get(url).toPromise();
    	//assign new items source
    	this.data = data;
    }
    

    You may also refer to the following sample for the full implementation:-

    https://stackblitz.com/edit/angular-3mkqiv?file=src%2Fapp%2Fapp.component.ts

    ~Sharad

  • Posted 30 August 2018, 6:18 pm EST

    Hi Sharad,

    thanks for your quick reply. That’s the solution I was looking for. Approach 1) is working “out of the box” and I will keep approach 2) in mind if nessecary for any other situation.

    Good to know how that the grid resets itself to default values whenever a new source is assigned.

    cheers,

    Andreas

Need extra support?

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

Learn More

Forum Channels