I'm on IG/AG 14.
I'm trying to build a pair of combo boxes for Designs which have properties: name, id, fab, proc, eng, etc.
I want to filter on proc and group by fab, where the split is on the boolean "eng".
Since the primary object (scenario) is fairly large already, I only want to store an "id" values array (scenario.designs: string[]).
Is it possible to accomplish this with a single array of Design and how?
Here is how I'm currently presenting it:
<igx-combo #prodDesignsCombo [data]="scenarioDesigns.prod" displayDensity="compact" displayKey="name" [(ngModel)]="scenarioToCreate.designs.prod" (selectionChanging)="updateSelectedDesigns($event, false)" searchPlaceholder="Search..." groupKey="facility"> <label igxLabel>PROD Designs</label> <igx-prefix><igx-icon>memory</igx-icon></igx-prefix> <ng-template igxComboEmpty> <span class="empty-class">No Designs Selected...</span> </ng-template> </igx-combo> <igx-combo #prodDesignsCombo [data]="scenarioDesigns.eng" displayDensity="compact" displayKey="name" [(ngModel)]="scenarioToCreate.designs.eng" (selectionChanging)="updateSelectedDesigns($event, true)" searchPlaceholder="Search..." groupKey="facility"> <label igxLabel>ENG Designs</label> <igx-prefix><igx-icon>engineering</igx-icon></igx-prefix> <ng-template igxComboEmpty> <span class="empty-class">No Designs Selected...</span> </ng-template> </igx-combo>
This is utilizing split designs in both master list and ngModel. The ngModel is also using a list of object rather than a list of string-ids, as hoped for.
Hi Chris,
I am glad the suggestion is helpful. Thank you for using Infragistics components.
Best regards, Bozhidara Pachilova
That was the key I was looking for. Thanks!
Thank you for answering the questions.
Based on my understanding at this point, I believe setting the “valueKey” property of the combos to "id" and mapping the ngModel-bound array to contain only ids is what you are looking for. To take the “scenario.designs.prod” array as an example, if it is initially mapped to the ids:
..prod: localData .filter((d) => ['auto3', 'manual3'].indexOf(d.proc) > -1 && !d.eng) .map((d) => d.id),
the combo could be bound to them, as they would be the value keys. The data object to which the combo is bound remains the “this.prod”, as it is required in order to display the other object properties, such as name, groups, etc.
This discards the need to map between objects and ids in the selectionChanging handler, where you could observe the newSelection argument is an array of ids at this point.
Here is a fork of your sample demonstrating this suggestion.
I hope this helps. Please, let me know if you need any further assistance on the matter.
I suppose worst case, I can store the models separately from the primary scenario object and integrate them on the "save" action, if there is not a more efficient path foward.
Hello Chris,
Thank you for providing a sample.
I am afraid some more concise clarifications would be needed, so I can assist you further:
Since the sample shows the combo correctly bound to and selecting data, I am unsure what the issue in question here is. In addition to the above questions could you please provide an example of the wrong behavior and the expected correct one?
Other than that, as mentioned in the initial reply, I believe your query might rather be related to the complex data operations on your data model. However, data preprocessing is not something really related to the IgxCombo itself, as it really receives the data as passed by the developer. The data could be either of complex type or a primitive, depending on the application needs.
Looking forward to hearing from you.
Best regards, Bozhidara Pachilova Associate Software Developer