Update Selected for complex object in Composite Editor.

[kiranbangar5946]

Hi @ghiscoding , i have one query in updateSelected for composite editor. Basically i am trying to update complex object , when i change only one field of that complexObject rest other feilds are assigned undefined or blank value.
Lets say my dataSource is as follows

const dataSource = [{
"id":1,
"name": "Karl",
"surname:"Marx",
"address":{
      "city":"Mumbai",
      "state":"Maharashtra",
      "country":"India"
}
}]

const updatedDataSource = [{
"id":1,
"name": "Karl",
"surname:"Marx",
"address":{
      "city":"Luckhnow", // as only city was entered
      "state": undefined, // this were kept blank
      "country": undefined // this were kept blank
}
}]

When i use composite editor to update and if i update (only CITY from ADDRESS object) , then state and country are updated to undefined as thier values are not filled. This works fine in case of plain objects and also if we fill all fields of complex objects.

[ghiscoding]

We have a grid with complex objects and it is working fine, you need to make sure to use the . dot notation in the field property and have the correct path. You can find more details about complex object editor in this Wiki. Typically the way it works is that it should work the same as a regular grid editor and if it does work in the grid then it should work the same in the composite editor. I cannot provide more help without a full repro and this might be better to ask on Stack Overflow with code

[kiranbangar5946]

Yes, exactly it works in grid editor also it works in composite editor but but as i mentioned in the above example, if only one field of complex object is edited and other are left blank , so as such one is forced to update all values of that complex object in composite editor It updates it to undefined. I used it with . dot notation it works for grid editor as usual.

To reproduce it -
Create a column definition like below for example -

const columnDef = [ {
        id: 'originName', name: 'Country of Origin', field: 'origin.name',
        formatter: Formatters.complexObject, columnGroup: 'Item',
        exportCustomFormatter: Formatters.complexObject, // without the Editing cell Formatter
        type: FieldType.text,
        sortComparer: SortComparers.objectString,
        filterable: true,
        sortable: true,
        minWidth: 100,
        editor: {
          model: Editors.text,
          massUpdate: true
        }
      },
      {
        id: 'code', name: 'Country code', field: 'origin.code',
        formatter: Formatters.complexObject, columnGroup: 'Item',
        exportCustomFormatter: Formatters.complexObject, // without the Editing cell Formatter
        dataKey: 'code',
        labelKey: 'code',
        type: FieldType.text,
        sortComparer: SortComparers.objectString,
        filterable: true,
        sortable: true,
        minWidth: 100,
        editor: {
          model: Editors.text,
          massUpdate: true
        }];

const dataSource = [
{
"id": 1,
"origin":{ //complex object
"name":"USA",
"code":"US"
}
];

Now select row with id =1  and click update selected to open composite editor,.
Next update **name : "INDIA"** and click update.

This results in code displaying as undefined
const dataSource = [
{
"id": 1,
"origin":{ //complex object
"name":"USA",
"code": undefined
}
];
As such you can see while updating in composite editor user is forced to enter the value in each field while if he selects multiple row he ends up with no choice to update as it leads to unwanted undefined value.

Thanks.

[ghiscoding]

If you have an input field that must update other things then you have to do that update yourself, the composite editor is just like a regular editor like I said earlier and your use case then you should probably use a singleSelect (when the list is not too long) or a autocomplete (when the list is long) and we have done something similar with our grid with a location that also has a code (similar to a country with name & code) and for that we used the autocomplete

Since we use the autocomplete, which comes from jQueryUI, we have access to the onSelect event that gives us the code & label, we can then do use that info to update other fields or object properties which is what we've done with the code below. There are some details of this in this Composite Editor - Dynamic Methods - Wiki

{
                id: 'locationCode', name: 'Shipping Location No.', field: 'shippingLocation.locationCode',
                formatter: Formatters.complexObject, sortable: true, filterable: true, minWidth: 95,
},
{
                id: 'locationLabel', name: 'Shipping Location', field: 'shippingLocation.label',
                formatter: Formatters.complexObject,
                sortable: true, filterable: true, minWidth: 125, width: 155,
                editor: {
                    model: Editors.autoComplete,
                    massUpdate: true,
                    editorOptions: {
                        minLength: 2,
                        source: (request, response) => {
                            getSnaLocationNamesForDrawingDelivery({ searchText: request.term }).then(results => {
                                response((results.length > 0) ? results : []);
                            })
                                .catch(error => { 
                                  response([]); 
                                  console.log(JSON.stringify(error)); 
                               })
                        },
                        onSelect: (_e, selection, row, cell, columnDef, dataContext) => {
                            // after the item is selected in the autocomplete list, we need to use the label/value
                            // and update both code & value in the grid which will also be what will be send later to the Save
                            const updatedDataContext = Utilities.deepCopy(dataContext);
                            if (updatedDataContext?.shippingLocation && selection?.item) {
                                updatedDataContext.shippingLocation.locationCode = selection.item.value;
                                updatedDataContext.shippingLocation.locationLabel = selection.item.label;
                                this.editedItems[row] = Utilities.deepCopy(updatedDataContext);

                                // update the grid row only when editing inline (not for mass update)
                                if (updatedDataContext.Id) {
                                    this.sgb.gridService.updateItem(updatedDataContext);
                                } else if (this.compositeEditorInstance) {
                                    // when using composite editor, we'll update some object input values
                                    this.compositeEditorInstance.changeFormInputValue('locationCode', selection.item.value, true);
                                    this.compositeEditorInstance.changeFormInputValue('locationLabel', selection.item.label, true);
                                }
                            }
                        }
                    },
                },
            },

You can do something similar with the singleSelect as well but the event would be different names which you can find in the multipleSelectOption.interface.ts and autocompleteOption.interface.ts

I can't help you more than that, so good luck

EDIT

I actually found the same code experiment in the Slickgrid-Universal Example 12 - code. You can see a live demo from Slickgrid-Universal Example 12, I just forgot to copy that piece of code back to Angular-Slickgrid, it's the same demo as Example 30 of Angular-Slickgrid