Editing grid with multiselect, binding to array type object with foreign key

[Vashist Sewgobind]

Hello,

I'm testing a specific scenario for a proof of concept.

I need to be able to use a grid in combination with a multiselect dropdown, which is working fine as you can see here:

The problem is that as soon as I save the row, it looks like this:

And when I edit the cell to change my selection, my previous selection is gone, so I have to select them again.

I suspect I have to follow this example regarding complex foreign keys:

How to How to set complex column as Foreignkey column in Angular Grid component - Syncfusion 

However, that example assumes a single value in the dropdown. In my case it's a multiselect, so it's an array of values. Each value in the array is a complex object with an id and a name property. This is where I'm stuck.

Thank you.

[Rajapandi Ravi]

Hi Vashist, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to use Multiselect dropdown in Grid while editing. By default in EJ2 Grid we do not have the array column support, So you can maintain your datasource as string type for multiselect column. We have prepared a sample based on your requirement and we suggest you to follow the below way to achieve your requirement. Please refer the below code example, sample and screenshot for more information.  

In the below sample we have rendered the MultiSelect for ShipCountry column. 

 

this.dpParams = { 

            create: () => { // It is used to create the element at time of initialization 

                this.elem = document.createElement('input'); 

                return this.elem; 

            }, 

            read: () => { // It is used to read the value from component at time of save 

                return this.multiSelectObj.value.join(','); //while saving the record convert the array value as string 

            }, 

            destroy: () => { // It is used to destroy the component. 

                this.multiSelectObj.destroy(); 

            }, 

            write: (args: { rowData: object, column: any }) => { //It is used to create custom component or assign default value at time of editing 

 

              let tempVal =  args.rowData[args.column.field] ? args.rowData[args.column.field].split(',') :[]; //at the time of Editing convert the string value to array because multiselect supports the array value only 

 

                this.multiSelectObj = new MultiSelect({ 

                    value: tempVal, 

                    dataSource:this.multiselectDatasource, 

                    fields: { value: 'Country',text:'Country' }, 

                    floatLabelType: 'Never', 

                    mode:'Box' 

                }); 

                this.multiSelectObj.appendTo(this.elem); 

            } 

        }; 

Sample: https://stackblitz.com/edit/angular-bda4p5-5wesng?file=app.component.ts 

Documentation link: https://ej2.syncfusion.com/angular/documentation/multi-select/getting-started/#getting-started 

Screenshot: 

 

If it does not meet your requirement, Please share your multiselect dropdown datasource and complete Grid rendering code that would be helpful for us to provide better solution. 

Regards,
Rajapandi R 

 

[Vashist Sewgobind]

Hi,

Thanks for the reply. I will check and let you know.

[Rajapandi Ravi]

Hi Vashist, 

Thanks for the update. 

We will wait to hear the from you. 

Regards, 

Rajapandi R