Object as Value Field

frederik

Asked On September 7, 2019 09:10 PM UTC

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' };

Reply | Reply with quote

Vinoth Kumar Sundara Moorthy [Syncfusion]

Replied On September 10, 2019 01:38 PM UTC

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

Reply | Reply with quote

frederik

Replied On September 10, 2019 02:49 PM UTC

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

Reply | Reply with quote

Vinoth Kumar Sundara Moorthy [Syncfusion]

Replied On September 11, 2019 10:35 AM UTC

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;">Category</th>

</tr>

</tbody>

</table>

</ng-template>

<ng-template #itemTemplate let-data>

<table>

<tbody>

<tr>

<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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147366	Sep 7,2019 09:10 PM UTC	Sep 11,2019 10:35 AM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US