Wijmo flexgrid filter issue in angular

Wijmo flexgrid filter issue in angular

Posted by: teenu.k on 21 July 2020, 11:54 am EST

• 

  teenu.k

  • Post Options:
  • Link
    Copy

  Posted 21 July 2020, 11:54 am EST

  Hi,

  when refreshing my browser i need to maintain the previous filter in my grid.for that i am saving the filterdefinition in localstorage. but after reloading the itemsource when i resetting the filterdefinition it is not reflecting.

  After reseting the filter definition also i manually fired .onFilterApplied() method but it also not reflecting.

  Also i tried to reset filterdefinition inside flexinitialised event and also tried it inside the ngAfterviewInit()…but both are not working.

  Also my flexgrid have pagination.

  following is some piece of code i am using .
  
  In my component.ts file ,

  import { WjFlexGridFilter } from ‘@grapecity/wijmo.angular2.grid.filter’;

  @ViewChild(‘flex’) flexTable: WjFlexGrid;
  
  @ViewChild(‘filter’) filter: WjFlexGridFilter;
  
  ngOnint(){
  
  this.dashboardService.getListData().then(resp => {
  
  this.listDataFilter(resp);
  
  this.invoiceItemsSource = new CollectionView(this.myData);
  
  this.invoiceItemsSource.pageSize = 10;
  
  this.setPagination(“first”, 0);
  
  this.filter.filterDefinition=localStorage.getItem(“filterdef”);
  
  this.filter.onFilterApplied();
  
  if (this.flexTable) {
  
  this.flexTable.autoSizeColumns();
  
  this.flexTable.rows.defaultSize = 38;
  
  }

  }
  
  }

  Inside html

  <wj-flex-grid #flex [frozenColumns]=“3” (initialized)=“flexInitialized(flex)” [columnGroups]=“allTableColumn” (click)=“gridClickHandler($event,flex)”
  
  [headersVisibility]=“‘Column’” [selectionMode]=“‘Row’” [itemsSource]=“invoiceItemsSource” [itemFormatter]=“itemFormatter” >

          <wj-flex-grid-filter  #filter  [filterColumns]="filtrColumns" (filterChanging)="filterChanging(filter,$event)" ></wj-flex-grid-filter>
        </wj-flex-grid> 
  

  Regards,
  
  Teenu

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 22 July 2020, 4:46 am EST

  Hi Teenu,

  It seems that the issue is related to ngOnInit. The filter is not initialized in this callback so the filterDefinition is not assigned properly. If you will open the console, you may also observe an error thrown. To resolve this, you will need to set the filterDefinition in ngAfterViewInit. Please refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-wcbdqi

  Regards,
  
  Ashwin

• 

  teenu.k

  • Post Options:
  • Link
    Copy

  Posted 22 July 2020, 8:51 am EST

  Hi Ashwin,
  
  I tried it within ngAfterViewInit(). but it only works when setting timeout inside ngAfterViewInit .and also worked it after adding filter.apply() method .

  when I have 200 data needed to set timeout as 1000. but if I have too much data also need to change the timeout.

  Is there any other options?

  ngAfterViewInit(){
  
  setTimeout(() => {
  
  var def = localStorage.getItem(“filterDef”);
  
  if(def) {
  
  this…filter.filterDefinition = def;
  
  this.filter.apply()
  
  }, 1000);
  
  }

  Regards,
  
  Teenu

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 23 July 2020, 3:41 am EST

  Hi Teenu,

  It seems that your data is returned from an ajax call. If it is then I would suggest you set the filterDefinition on the itemsSourceChanged event of FlexGrid. In the previous sample that I provided, if I simulated an ajax call to fetch the data, the ngAfterViewInit did not work. So, your issue may be similar.

  Please refer to the updated sample below for reference:

  https://stackblitz.com/edit/angular-r3qf8c

  ~regards