Get and Set Combo box datasource in flexgrid using wjFlexGridCellTemplate

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

  • 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>


  • Replied 12 November 2020, 7:56 pm EST

    Hi Team,

    May I know the update on this.

    Thanks.
  • Replied 15 November 2020, 6:29 pm EST

    Hi Team,

    Update please.

    Thanks
  • Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels