Is it possible to select entire row rather than one property

[Sri Nistala]

In the Multiselect dropdown, under fields, there is option to select "text" and "value". Here in the "value" field, if I add something like "id" then the final object is saving only the "id" value. Instead of the just one field is it possible to save the entire row in the selected object.  For eg-

var sportsData = [ { id: 'game1', sports: 'Badminton' }, { id: 'game2', sports: 'Football' }, { id: 'game3', sports: 'Tennis' } ]; // initialize MultiSelect component var listObj = new ej.dropdowns.MultiSelect({ dataSource: sportsData, // maps the appropriate column to fields property fields: { text: 'sports', value: 'id' }, // set placeholder to MultiSelect input element placeholder: "Select games"}); listObj.appendTo('#select');

In the above setup, when user selects a row in the dropdown, is it possible to the save the row - 

{id: 'game1', sports:'Badminton'} into the object. Currently, it selects only "game1" 

[Kokila Poovendran]

Hi Sri Nistala,

Hi Sri Nistala,

Greetings from Syncfusion support!

Thank you for reaching out to us with your query regarding the MultiSelect dropdown. We understand that you want to select and save the entire row instead of just one field. We have validated your requirement and prepared a sample code snippet to achieve this. Please review the code below:

// initialize MultiSelect component

var games = new ej.dropdowns.MultiSelect({

  // set the local data to dataSource property

  dataSource: sportsData,

  // map the appropriate columns to fields property

  fields: { text: 'sports', value: 'id' },

  // set the placeholder to MultiSelect input element

  placeholder: 'Select countries',

 

  select: onSelectHandler,

});

games.appendTo('#local');

 

function onSelectHandler(args) {

  // args.itemData returns the entire value

}

 

You can also find a runnable sample bellow: https://stackblitz.com/edit/egqg1a-sm2k5a?file=index.js,index.html

In this implementation, we have utilized the "select" event, and the "args.itemData" returns the entire row with both the "text" and "value" properties. Please check this modification and let us know if it meets your requirements.

API: https://ej2.syncfusion.com/javascript/documentation/api/multi-select/#select

If you have any further questions or need additional assistance, feel free to reach out.

Regards,

Kokila Poovendran.

[Sri Nistala]

Thank you. This is helpful. However, how can we get this to work with Data Manager? My scenario involves scheduler control with custom field as multi-select inside the editor pop-up. My scheduler uses data manager for sending updates to the server. 

So, what do I need to do in the OnSelectHandler to pass the full row from the multi-select back to the data manager?

Thanks
Sri

[Kokila Poovendran]

Hi Sri Nistala,

Thank you for your response. We have modified the sample to incorporate the Scheduler component along with the MultiSelect component, and we have also integrated the Data Manager for sending updates to the server. Please review the updated sample at the following link:

https://stackblitz.com/edit/additonal-field-multiselect-component-xxxac3?file=index.js

In this modified sample, we have used the DataManager to bind the MultiSelect component to the data source. If there are any specific details about your scenario that we might have missed or if you encounter any issues, please provide more information, and we'll be happy to assist you further.

Documentation: https://ej2.syncfusion.com/javascript/documentation/multi-select/data-binding#binding-remote-data

Regards,
Kokila Poovendran.