Detailed data binding for wj-flex-grid-column

Detailed data binding for wj-flex-grid-column

Posted by: andreas.knuth on 20 June 2018, 11:51 pm EST

• 

  andreas.knuth

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 June 2018, 11:51 pm EST

  Hi,
  
  I’m using Flexgrid and Angular5. In my case I’ve a dynamic number of columns. So I’m writing

  
  <wj-flex-grid-column *ngFor="let col of columns.items" [binding]="col"></wj-flex-grid-column>
  
  

  That means I’ve e.g. the follwing data structure:

  
  [{name: 'a1',type:'a2'},{name: 'b1',type:'b2'}]
  
  

  Now I need an additional ID for every cell and my datastructur looks like this:

  
  [{name: {value:'a1',id:1},type:{value:'a2',id:2}},{name: {value:'b1',id:3},type:{value:'b2',id:4}}]
  
  

  How can I do the binding in my wj-flex-grid-column with this setup ? I tried a lot of things

  [binding]="col.value"
  ``` and so on ...
  
  best regards,
  Andreas

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 21 June 2018, 10:54 pm EST

  Hi Andreas,
  
  The requirements can be accomplished by making an array with column binding details as:-

  this.columns=[
  	{header:"Name id",binding:"name.id",visible:true},
  	{header:"Name value",binding:"name.value",visible:true},
  	{header:"Type id",binding:"type.id",visible:true},
  	{header:"Type value",binding:"type.value",visible:true}
  ];
  

  Then in template binding you can do:-

  <wj-flex-grid-column *ngFor="let col of columns" [binding]="col.binding" [header]="col.header" [visible]="col.visible"></wj-flex-grid-column>
  

  Please refer to the following sample for the same:-
  
  https://stackblitz.com/edit/angular-bsgbzr?file=app%2Fapp.component.ts

  ~Manish

• 

  andreas.knuth

  • Post Options:
  • Link
    Copy

  Posted 25 June 2018, 2:47 am EST

  Hi Manish,

  thanks a lot for your answer - it helped a lot for displaying the data.

  If I add the option [allowAddNew]=“true” for the grid then every new value inside a new row disappears after typing ENTER

  Also copying whole regions of data from e.g. an Excel Sheets into the grid won’t be shown …

  any idea how to cope with this ?

  best regards,
  
  Andreas

• 

  andreas.knuth

  • Post Options:
  • Link
    Copy

  Posted 25 June 2018, 8:25 am EST

  As I see the data structure for these new rows has to be created first. But what is the correct callback for doing this ?
  
  I’m concerning about copy/paste new rows just as editing a cell inside a new row.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 June 2018, 1:01 am EST

  Hi,
  
  The culprit here is the detailed grid binding. When a new row is created, what happens under the hood is first a new object is created, then the value is assigned to its binding. Now in this scenario when the value is assigned for name.id first it looks for name property on the newly created object which is undefined so the grid fails to assign id/value to name/type property.

  To resolve this problem we can assign an itemCreator function which will create new item objects of an appropriate type for the grid.
  
  //please refer to following code snippet

  
  initGrid(grid){
  	grid.collectionView.newItemCreator=()=>{
  		return{
  			name:{},
  			type:{}
  		};
  	};
  }
  

  Please refer to the following sample which implements the same:-
  
  https://stackblitz.com/edit/angular-pfgkgx?file=app%2Fapp.component.ts

  For any type of initialization work please use initialized event provided by wj-flex-grid.

  ~Manish

• 

  andreas.knuth

  • Post Options:
  • Link
    Copy

  Posted 27 June 2018, 9:13 am EST

  Thanks a lot for the detailed explanation. That helped to resolve all issues regarding this topic.

  best regards,
  
  Andreas