Can't get selected value from multiselect inside datagrid

[Shak Mohammad Imran]

I'm trying to retrieve the selected values from a multi-select dropdown, but it always returns only one value. I've tried multiple approaches, but it still returns a single value.

{
   field: "owners",
   headerText: "Owners",
   fieldname: "Owners",
   autoFit: true,
   minWidth: "300",
   editType: "multiselectedit",
   edit: this.editParams.owner, 
}

this.editParams.owner = {
                create: () => {
                    ownerElem = document.createElement('input');
                    return ownerElem;
                },
                read: () => {
                    return ownerObj.value;                   
                },
                destroy: () => {
                    ownerObj.destroy();
                },
                write: (args) => {
                    var data = args.rowData.owners;                     
                    ownerObj = new MultiSelect({
                        allowFiltering: true,
                        dataSource: [...this.owners],
                        fields: { text: "text", value: "value" },
                        value: typeof (data) === 'string' ? args.rowData.owners.split() : data,
                        mode: 'Box',
                        placeholder: 'Select Owner',
                        filtering: helper.debounce((params) => {
                            let { text } = params || {};
 
                            if (text.length >= 4) {
                                helper.get(`/userroles/SearchUserList?term=${text}`, null, resp => {
 
                                    this.owners = [];
                                    if (resp.length > 0) {
                                        this.owners = resp.map(u => {
                                            return {
                                                text: u.fullName,
                                                value: u.userName
                                            }
                                        });
                                    }
 
                                    ownerObj.dataSource = [...this.owners];
                                    ownerObj.dataBind();
                                }, true, false, true);
                            }
                        }, 400)
                    });
                    ownerObj.appendTo(ownerElem);
                }
            }

[Joseph Christ Nithin Issack]

HI Shak,

Greetings from Syncfusion Support!

Based on your query, we understand that when selecting multiple items in a MultiSelect component and saving the record, only one value is being updated in the Grid.

Upon reviewing the provided code example, we observed that the value is being returned as an array of strings within the column.edit.read method. This behavior occurs because the EJ2 Grid does not support array-type fields as column data. The supported data types for columns include checkbox, boolean, number, string, date, and datetime. For a comprehensive overview of supported column types, please refer to our documentation:

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/columns#column-types

To resolve this issue, we recommend converting the array of strings into a single string using the join(',') method in JavaScript. This will ensure that all selected values are properly displayed as a concatenated string in the Grid.

Example Implementation:

 

function readShipCityFunction() {

  return multiSelectInstance.value.join(',');

}

 

For your reference, we have also provided a sample project demonstrating this approach:

Sample: https://stackblitz.com/edit/wkpknyw3-jbu71e2d?file=src%2FApp.vue,src%2Fdatasource.js

Regards,

Jospeh I.

[Shak Mohammad Imran]

Hi Joseph,

I've tried that, but it always returns only a single value and it's alwasy item that added last.

Br,

Imran

[Vasanthakumar K]

Hi Shak Mohammad Imran,

Yes, you are correct that only a single value is binding to a single cell. As mentioned in our previous response, EJ2 Grid does not support an array of values as a column type. Additionally, we want to clarify that there is no built-in multiselectedit available in the editType property of EJ2 Grid column.

For reference, please check the supported edit types here: Edit Types Documentation

Since the grid column type supports only checkbox, boolean, number, string, date, and datetime values, the suggested approach is to join the selected order-wise values using a comma (","). This will concatenate the selected values into a single string that can be stored in the grid cell. This is the possible default behavior when binding and perform data operation with multiple selected values in EJ2 Grid.

Regards,

Vasanthakumar K

[Shak Mohammad Imran]

Hi,

I solved the issue. For me, the problem was in the filtering function, and now it looks like this:

filtering: (e) => {

    let { text } = e || {};

    if (text.length >= 4) {

        helper.get(`/userroles/SearchUserList?term=${text}`, null, resp => {

            if (resp.length > 0) {

                const owners = resp.map(u => {

                    return {

                        name: u.fullName,

                        userPrincipalName: u.userName

                    }

                });

                e.updateData(owners);

            }

        }, true, false, true);

    }

}

[Dineshnarasimman Muthu]

Hi,

We are glad that the reported issue has been resolved. If you need any further assistance, please get back to us.

 

Regards,

Dineshnarasimman M

[finnbentley]

Given that the EJ2 Grid does not support binding an array of values to a single cell and that the only available edit types are checkbox, boolean, number, string, date, and datetime, what are the best practices for handling scenarios where multiple selections are required @io games?

[Santhosh Iruthayaraj]

Hi finnbentley,

Since the EJ2 Grid does not support binding an array of values to a single cell, the recommended approach is to store multiple selected values as a concatenated string. For editing, you can convert them back into an array and use the MultiSelect component. When saving, concatenate the values back into a string, as mentioned in our previous responses.

Please let us know if you need any assistance with the implementation.

Regards,

Santhosh I