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,
Thank you for posting to Infragistics Community!
I have been looking into your question and I believe this requirement is a matter of data manipulation. As you are probably familiar, the IgxCombo offers the valueKey and displayKey properties to work with object arrays. Apart from that, any other data operations could be achieved by leveraging the Combo API. For instance, you could create an array containing only the string-ids extracted from the complex object array and bind it to the combo, as per the described requirement. Then, on the selectionChanging event, more data about the new selection could be extracted from the original object array, based on the event arguments’ new selection. Still, I am not sure if this would not be more of an overhead than simply using the valueKey and displayKey properties.
Additionally, it is possible that I am not completely understanding your scenario. Since there are two combos is it related to cascade selection? It would be appreciated to please elaborate a bit more on what a “split design” means. Providing a sample object of the mentioned data type would also be helpful, as the “name, id, fab, proc, eng, etc.” properties are mentioned, however, the html snippet shows other property names such as groupKey=”facility”, [data]="scenarioDesings.prod”, etc. Ideally, please, fork and modify any of our Combo documentation StackBlitz demos with any relevant code, additional description and comments. Thank you in advance.
Best regards, Bozhidara Pachilova Associate Software Developer
I have produced a good minimum reproduction: StackBlitz Combos
Again, the goal is to only store the IDs in the model, but display the designs by name, grouped by fab, split by the "eng" boolean, and filterable by "proc".
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.
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.
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.
Best regards, Bozhidara Pachilova
That was the key I was looking for. Thanks!
I am glad the suggestion is helpful. Thank you for using Infragistics components.