Object as Value Field

[frederik]

How do I bind the entire object rather than a property of the object using fields property?

Using your vegetable example, i want to display the vegetable name, but bind the entire vegetable rather than just the id as I want to use the multiselect to add vegatables to an array of vegetables using reactive forms, i.e. it would be great if I don't have to manually listen to a value/model changes to add the vegetables (rather than the ids) to the array.

many thanks,

`<ejs-multiselect id='multiselectelement' [dataSource]='vegetableData' [fields]='fields'[placeholder]='placeholder' [popupHeight]='height'></ejs-multiselect>`

public fields: Object = { groupBy: 'category', text: 'vegetable', value: 'id' };

[Vinoth Kumar Sundara Moorthy]

Hi Frederik, 

 

Greetings from Syncfusion Support. 

 

We have checked your reported query and would like to inform you that  array of data can also be populated in to the MultiSelect without using fields property.  If you use datasource as object type, then the usage of fields property is mandatory. Please refer the below UG link. 

 

UG Document Link for Array of data: https://ej2.syncfusion.com/angular/documentation/multi-select/data-binding/#1-array-of-string 

 

Could you please check the above details and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S 

[frederik]

I do indeed have an array of objects, but want need the field value to pass back the entire object rather than just one property of the object, i.e. I am happy to make use the "fields" property but can't get it to pass back the entire object (or any object for that matter - can only bind the value to primitive types)

Many thanks

[Vinoth Kumar Sundara Moorthy]

Hi Frederik, 

 

Good day to you. 

 

We would like to let you know that, as per behavior we can map only one field value for the value property. So, we suggest you use template to achieve your requirement. 

 

Code Snippet 

<ejs-multiselect id='multi-template' [cssClass]="e-multi-column" [dataSource]='multidata' [fields]='multifields' [mode]='box' [placeholder]='multiwatermark'> 

    <ng-template #headerTemplate> 

        <table> 

            <tbody> 

                <tr> 

                    <th class="e-text-center" style="width: 75px;">ID</th> 

                    <th class="e-text-center" style="width: 75px;">Name</th> 

                    <th class="e-text-center" style="width: 75px;">Category</th> 

                </tr> 

            </tbody> 

        </table> 

    </ng-template> 

    <ng-template #itemTemplate let-data> 

        <table> 

            <tbody> 

                <tr> 

                    <td class="e-text-center" style="width: 75px;">{{data.Id}}</td> 

                    <td class="e-text-center" style="width: 75px;">{{data.Vegetable}}</td> 

                    <td class="e-text-center" style="width: 75px;">{{data.Category}}</td> 

                </tr> 

            </tbody> 

        </table> 

    </ng-template> 

</ejs-multiselect> 

 

 

Sample Link: https://stackblitz.com/edit/angular-multiselect-templates-cvf2zv?file=app.component.html 

 

Could you please check above sample and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S