[Angular] Flexgrid, wj-flex-grid-cell-template, and sorting

[Angular] Flexgrid, wj-flex-grid-cell-template, and sorting

Posted by: frederic.jammes on 9 July 2018, 12:24 am EST

• 

  frederic.jammes

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 July 2018, 12:24 am EST

  Hello,

  I’m having a flexgrid, in which there is a wj-flex-grid-column, in which there is a wjFlexGridCellTemplate. This column must print the concatenation of 2 attributes of my item (label1 & label2).
  
  I would like to be able to sort my grid by this column first by label1 then by label2.

  How can I achieve this ?

  Here’s a sandbox of my problem : https://codesandbox.io/s/928pj18n6w

  By the way, the first item doesn’t have a label 1, and the second doesn’t have a label2, there is a conditional
  
  to take a second line when both are present. How can I have rows using only the needed height ?

  Regards,

  Frédéric

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 10 July 2018, 12:48 am EST

  Hi,
  
  Thanks for providing the sample.

  To sort the column with the value of label1+label2 , you may use sortConverter property of collection view and assign a function to which return the value of each item that is used for sort comparison.
  
  Please refer to following code snippet

  /* assign sortMemberPath to identify this col */
   
  <wj-flex-grid-column [header]="'label1 + label2'" [binding]="'label1' [sortMemberPath]="'colWithTemplate'" >
  .....template goes here
  </wj-flex-grid-column>
  /* in grid initialized method, assign sort converter */	
  initGrid(grid){
  	(grid.collectionView as wjCore.CollectionView).sortConverter=(sd,item,value)=>{
  		if(sd.property="colWithTemplate"){
  			return item.label1+item.label2;/*text that will be used for sort comparisons*/
  		}
  		return value;
  	}
  }
  

  More info on sortConverter:-http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.collections.CollectionView.Class.html#sortConverter

  More info on sortMemberPath:-http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.Column.Class.html#sortMemberPath

  You may also set sortComparer property if you want to implement your own compare logic. Please Refer the following for more info:-
  
  http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.collections.CollectionView.Class.html#sortComparer

  For resizing rows you may use autoSizeRows() method of flexgrid.
  
  Please refer to following code snippet:

  /*first set autoSizeRows property to false for wjFlexGridTemplate */
  <ng-template [autoSizeRows]="false"
          wjFlexGridCellTemplate
          [cellType]="'Cell'"
          let-item="item">
          {{item.label1}}<br *ngIf="item.label1&&item.label2">{{item.label2}}
    </ng-template>
  /* then resize rows on grid init and loaded rows event */
  <wj-flex-grid #grid (initialized)="init(grid)" (loadedRows)="gridRowsLoaded(grid)">
  ....grid columns
  </wj-flex-grid>
  /* equivalent init and gridRowsLoaded methods */
  init(grid){
  	grid.autoSizeRows();
  }
  gridRowsLoaded(grid){
  	grid.autoSizeRows();
  }
  

  Link to updated sandbox:-https://codesandbox.io/s/yvl4j5lp0v

  P.S. Don’t forget to set column binding for autoSizeRows() to work properly.

  ~Manish

• 

  frederic.jammes

  • Post Options:
  • Link
    Copy

  Posted 12 July 2018, 7:54 pm EST

  It works ! Thank you for your time !