Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
815
igx-combo bound to CSV cell value of parent IGX-column
posted

Hello I have a cell with a comma separated json collection: 

"ShoreCSV": "#3 Post Shore, #4 Post Shore, #5 Post Shore",
I want the nested igx-combo to have those items selected when the user goes into edit mode.
Here is the View:
<igx-column field="ShoreCSV" header="Shore" [dataType]="'string'" width="19%" [editable]="true" [filterable]="false">
       <ng-template igxCell let-cell="cell">
             {{cell.value}}
       </ng-template>
 <ng-template igxCellEditor let-cell="cell" let-value>
        <igx-combo [type]="'border'" [(ngModel)]="arrayofShores" [data]="shoreData" [valueKey]="'name'" placeholder="Shore(s)"                  (onSelectionChange)="selectionChange($event, cell)"></igx-combo>
 </ng-template>
</igx-column>'
//And here are the select options available.
public ngOnInit(){
this.shoreData = [
{ 'id': '#1 Post Shore', 'name': '#1 Post Shore'},
{ 'id': '#2 Post Shore', 'name': '#2 Post Shore'},
{ 'id': '#3 Post Shore', 'name': '#3 Post Shore'},
{ 'id': '#4 Post Shore', 'name': '#4 Post Shore'},
{ 'id': '#5 Post Shore', 'name': '#5 Post Shore'},
{ 'id': '#XL-350cm', 'name': '#XL-350cm'},
{ 'id': '#XL-480cm', 'name': '#XL-480cm'},
{ 'id': '#XL-625cm', 'name': '#XL-625cm'},
{ 'id': '6 feet Modular Alumn Shore', 'name': '6 feet Modular Alumn Shore'},
{ 'id': 'Stub Shore', 'name': 'Stub Shore'},
{ 'id': 'Customer Owned Shore', 'name': 'Customer Owned Shore'}];
this.arrayofShores = [{}];
};
  • 80
    Offline posted

    Hi Eric,

    Thanks for contacting Infragistics!

    To bind the combo's selected values with `[(ngModel)]`, you need to pass a reference to the entries inside of the combo's `data` input:


    export class ComboMainComponent implements OnInit {
        public shoreData: any[];
        public arrayOfShores: any[];
    
        public ngOnInit() {
            this.shoreData = [
            { 'id': '#1 Post Shore', 'name': '#1 Post Shore'},
            { 'id': '#2 Post Shore', 'name': '#2 Post Shore'},
            { 'id': '#3 Post Shore', 'name': '#3 Post Shore'},
            { 'id': '#4 Post Shore', 'name': '#4 Post Shore'},
            { 'id': '#5 Post Shore', 'name': '#5 Post Shore'},
            { 'id': '#XL-350cm', 'name': '#XL-350cm'},
            { 'id': '#XL-480cm', 'name': '#XL-480cm'},
            { 'id': '#XL-625cm', 'name': '#XL-625cm'},
            { 'id': '6 feet Modular Alumn Shore', 'name': '6 feet Modular Alumn Shore'},
            { 'id': 'Stub Shore', 'name': 'Stub Shore'},
            { 'id': 'Customer Owned Shore', 'name': 'Customer Owned Shore'}];
            // set arrayOfShores to hold references to this.shoreData;
            this.arrayOfShores = [this.shoreData[0], this.shoreData[1], this.shoreData[2]];
        }
    }


    Here is a StackBlitz sample.

    This will work with the latest version of our Angular library (currently, 8.1.3)

    Please note that there is an open issue in our Angular Repo that, once addressed, will introduce a **breaking change** to the way the combo is bound to data. When the fix is in place, you can just remove the `[valueKey]` input and everything should work properly.

    I hope this was helpful!