Scroll and table grouping

Scroll and table grouping

Posted by: willemfrits.dragstra on 26 August 2018, 8:18 pm EST

• 

  willemfrits.dragstra

  • Post Options:
  • Link
    Copy

  Posted 26 August 2018, 8:18 pm EST

  Dear Wijmo-team

  I am at a wijmo table with several groupings. And after calculating the groupings (3 levels) I call: this.flexGrid.collapseGroupsToLevel two.

  That call will close the third level and drags the vertical-scroll up and down.

  After closing all of the first level, which takes some time, the scroll will stay at the middle of the table!

  My question is: what could I do to have the scroll ending-up at the top of the table?

  I tried using: this.document.getElementById(‘conteneur-scroll-grid’).scrollTop = 0

  but without any luck…

• 

  willemfrits.dragstra

  • Post Options:
  • Link
    Copy

  Posted 26 August 2018, 11:56 pm EST

  Thinking that the this.flexGrid.collapseGroupsToLevel method would be called after the table has been painted, I need to find just that.

  But I am having trouble using the event loadedRowsNg.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 27 August 2018, 10:12 pm EST

  Hi,
  
  Grid uses scrollPosition property to determine current scroll position so you may use the same property for scrolling the grid to top.
  
  Please refer to the following code snippet:-

  this.flexGrid.scrollPosition = new wjcCore.Point(this.flexGrid.scrollPosition.x, 0);
  

  But I am having trouble using the event loadedRowsNg.
  
  <<<<<<<<<<<<<
  
  loadedRowsNg event is meant for programmatic access in angular style so you need to subscribe to loadedRowsNg for proper access.
  
  Refer to the following code snippet:-

  this.flexGrid.loadedRowsNg.subscribe((e)=>{
        console.log('loaded rows ng');
  });
  

  Please use loadedRows event if you are adding event handler using template binding like:-

  <wj-flex-grid #grid [itemsSource]="data" (loadedRows)="rowsLoadedHandler(grid,$event)">
  </wj-flex-grid>
  //equivalent rowsLoadedHandler
  rowsLoadedHandler(grid,args){
  	console.log('rows loaded');
  }
  

  You may also refer to the following sample for complete implementation:-
  
  https://stackblitz.com/edit/angular-5v8rfa?file=app%2Fapp.component.ts

  Please let us know for any further queries.

  ~Sharad

• 

  willemfrits.dragstra

  • Post Options:
  • Link
    Copy

  Posted 28 August 2018, 1:39 am EST

  Dear Wijmo-team

  The stackblitz example is not going to work for us, since it uses a button-click which generates the event we need.
  
  In other words, our application works the following:

  On ng-changes
  1) a search-filter delivers the list-data;
  2) the data enters into a collection-view;
  3) the collection-view enters into several groups;
  4) the table appears
  
  On loadedRows
  4) the loadedRows event calls a method that collapses the grouping into a certain level;
  

  just now the scroll should be activated and move to the top of the table. As you see there is no button-event. The search-filter button is to early.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 28 August 2018, 5:10 pm EST

  Hi,
  
  Please refer to the following sample which collapses groups to a certain level and restores scroll position on loadedRows event:-
  
  https://stackblitz.com/edit/angular-5v8rfa?file=app%2Fapp.component.ts

  If this does not fulfil your requirement, can you please modify the sample to reflect your problem or let us know about the changes we need make to get as close as possible to the problem.

  Best Regards
  
  Sharad

• 

  willemfrits.dragstra

  • Post Options:
  • Link
    Copy

  Posted 28 August 2018, 9:20 pm EST

  Hola Wijmo-Team

  Interestingly we arrived at the same spot as your second stackblitz shows:
  
  using a new event/thread by calling a zero-setTimeout on the scroll-position.
  
  We intended to improve that solution by finding an other way calling the scroll.

  My colleague Sergio found that by generating a async-event-emitter
  
  ```
  
  @Output() public tableauCharge: EventEmitter = new EventEmitter(true);

  called at the the Wijmo loadedRows event and send to the parent component, will permit us finally to do the scroll to top (from out the parent). 
  	
  Our question to you is, is it possible to have the Wijmo loadedRows fire a async event? We believe that, that would resolve the problem in a clean manner without the extra async event.
  
  Saludo
  willem

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 29 August 2018, 8:11 pm EST

  Hi Saludo,

  loadedRows is already an event fired by the grid so it won’t be a feasible solution to fire another event from loadedRows.
  
  So in cases like this, it would be best to use either setTimeout() or an external async event as you have already figured out.
  
  Just for reference, here is a sample using an external async event instead of setTimeout():-
  
  https://stackblitz.com/edit/angular-mtve6e?file=app%2Fapp.component.ts

  Best Regards
  
  Sharad