diff --git a/src/app/modules/angular-slickgrid/editors/__tests__/selectEditor.spec.ts b/src/app/modules/angular-slickgrid/editors/__tests__/selectEditor.spec.ts index 70323a205..f639436b0 100644 --- a/src/app/modules/angular-slickgrid/editors/__tests__/selectEditor.spec.ts +++ b/src/app/modules/angular-slickgrid/editors/__tests__/selectEditor.spec.ts @@ -5,7 +5,7 @@ import { TestBed } from '@angular/core/testing'; import { TranslateService, TranslateModule } from '@ngx-translate/core'; import { Editors } from '../index'; import { SelectEditor } from '../selectEditor'; -import { AutocompleteOption, Column, EditorArgs, EditorArguments, GridOption, FieldType, OperatorType } from '../../models'; +import { AutocompleteOption, Column, EditorArgs, EditorArguments, GridOption, FieldType, OperatorType, ColumnEditor } from '../../models'; const containerId = 'demo-container'; @@ -416,6 +416,19 @@ describe('SelectEditor', () => { expect(currentValue).toEqual({}); }); + it('should return flat value when using a dot (.) notation for complex object with a collection of option/label pair and using "serializeComplexValueFormat" as "flat"', () => { + mockColumn.field = 'employee.gender'; + mockItemData = { id: 1, employee: { id: 24, gender: ['male', 'other'] }, isActive: true }; + (mockColumn.internalColumnEditor as ColumnEditor).serializeComplexValueFormat = 'flat'; + editor = new SelectEditor(editorArguments, true); + editor.loadValue(mockItemData); + const output = editor.serializeValue(); + const currentValue = editor.currentValue; + + expect(output).toEqual(['male', 'other']); + expect(currentValue).toEqual(''); + }); + it('should return object value when using a dot (.) notation and we override the object path using "complexObjectPath" to find correct values', () => { mockColumn.field = 'employee.bio'; mockItemData = { id: 1, employee: { id: 24, bio: { gender: ['male', 'other'] } }, isActive: true }; diff --git a/src/app/modules/angular-slickgrid/editors/selectEditor.ts b/src/app/modules/angular-slickgrid/editors/selectEditor.ts index 2d1d92dc5..ca527559a 100644 --- a/src/app/modules/angular-slickgrid/editors/selectEditor.ts +++ b/src/app/modules/angular-slickgrid/editors/selectEditor.ts @@ -207,7 +207,9 @@ export class SelectEditor implements Editor { // is the field a complex object, "address.streetNumber" const isComplexObject = fieldName && fieldName.indexOf('.') > 0; - if (isComplexObject && typeof c === 'object') { + const serializeComplexValueFormat = this.columnEditor && this.columnEditor.serializeComplexValueFormat || 'object'; + + if (isComplexObject && typeof c === 'object' && serializeComplexValueFormat === 'object') { return c; } @@ -242,8 +244,9 @@ export class SelectEditor implements Editor { // is the field a complex object, "address.streetNumber" const fieldName = this.columnDef && this.columnDef.field; const isComplexObject = fieldName && fieldName.indexOf('.') > 0; + const serializeComplexValueFormat = this.columnEditor && this.columnEditor.serializeComplexValueFormat || 'object'; - if (isComplexObject && typeof itemFound === 'object') { + if (isComplexObject && typeof itemFound === 'object' && serializeComplexValueFormat === 'object') { return itemFound; } else if (itemFound && itemFound.hasOwnProperty(this.valueName)) { const labelText = itemFound[this.valueName]; diff --git a/src/app/modules/angular-slickgrid/models/columnEditor.interface.ts b/src/app/modules/angular-slickgrid/models/columnEditor.interface.ts index 0bb678242..f9a3c1f79 100644 --- a/src/app/modules/angular-slickgrid/models/columnEditor.interface.ts +++ b/src/app/modules/angular-slickgrid/models/columnEditor.interface.ts @@ -117,6 +117,15 @@ export interface ColumnEditor { */ required?: boolean; + /** + * defaults to 'object', how do we want to serialize the editor value to the resulting dataContext object when using a complex object? + * Currently only applies to Single/Multiple Select Editor. + * + * For example, if keep default "object" format and the selected value is { value: 2, label: 'Two' } then the end value will remain as an object, so { value: 2, label: 'Two' }. + * On the other end, if we set "flat" format and the selected value is { value: 2, label: 'Two' } then the end value will be 2. + */ + serializeComplexValueFormat?: 'flat' | 'object'; + /** * Title attribute that can be used in some Editors as tooltip (usually the "input" editors). *