We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Object as Value Field

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
loading
Tags: MultiSelectDropdown
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' };

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. 
 
 
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
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

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;">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> 
 
 
 
Could you please check above sample and get back to us if you need any further assistance on this? 
 
Regards, 
Vinoth Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon