Get and Set Combo box datasource in flexgrid using wjFlexGridCellTemplate

Get and Set Combo box datasource in flexgrid using wjFlexGridCellTemplate

Posted by: r.kondaru on 12 November 2020, 4:41 pm EST

• 

  r.kondaru

  • Post Options:
  • Link
    Copy

  Posted 12 November 2020, 4:41 pm EST

  Hello Team,

  I have a flexgrid having 2 columns.
  
  each column contain a combo box, while selecting first combo, then I have to fill the second combo using first combo value.

  I did this by using DataMaps but this solution was not suitable to our requirement.

  After that I have written the below code, UI looks as expected, but I am unable to read data, set data and find the combo boxes in typescript. Please help me to resolve the issue.

  <wj-flex-grid #flexGrid
  	[itemsSource]="targetCompanyDataSource"
  	[autoGenerateColumns]="false" [itemFormatter]="itemFormatter"
  	
  	<ng-template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-row="row"
  		let-item="item">
  		{{row.index + 1}}
  	</ng-template>
  	<wj-flex-grid-column [header]="' '" [binding]="'active'"
  		class="bui-checkbox-unchecked" [allowSorting]="false" [width]="33">
  	</wj-flex-grid-column>
  
  	<wj-flex-grid-column [header]="'Source Column'"
  		[binding]="''" [width]="'*'">
  		<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
  			<combobox [(ngModel)]="cell.editCellCompanies"
  				[itemsObservable]="SourceData" [options]="comboOptions"
  				 [placeholder]="'Select'"
  				>
  			</bento-combobox>
  		</ng-template>
  	</wj-flex-grid-column>
  	<wj-flex-grid-column [header]="'Target Column'" [binding]="''"
  		[width]="'*'">
  		<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
  			<combobox [(ngModel)]="cell.editCellCompanies"
  				[itemsObservable]="TargetData" [options]="comboOptions"
  				 [placeholder]="'Select'"
  				>
  			</bento-combobox>
  		</ng-template>
  	</wj-flex-grid-column>
  </wj-flex-grid>
  

• 

  r.kondaru

  • Post Options:
  • Link
    Copy

  Posted 12 November 2020, 7:56 pm EST

  Hi Team,

  May I know the update on this.

  Thanks.

• 

  r.kondaru

  • Post Options:
  • Link
    Copy

  Posted 15 November 2020, 6:29 pm EST

  Hi Team,

  Update please.

  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 16 November 2020, 5:00 pm EST

  Hi Raman,

  We are extremely sorry for the delayed response.

  In the ng-template, instead of using cell.editCellCompanies, try using cell.item.editCellCompanies. The cell variable contains information about the row, column, and item but it does not contain the item’s info directly.

  Also, I would recommend using the CellEdit template instead of the Cell template. The CellEdit template contains another cell.value variable, which can be used to easily update the cell’s value. So, you can bind it like this:

  <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell">
  	<bento-combobox [(ngModel)]="cell.value"
  				[itemsObservable]="SourceData" [options]="comboOptions"
  				 [placeholder]="'Select'"
  	>
  	</bento-combobox>
  </ng-template>
  

  Let us know if this helps.

  Regards,
  
  Ashwin