CODEWITHSUNDEEP
angularionic-frameworkslickgridangular-slickgrid
Surya Kesavan
Surya Kesavan

Reputation: 1

Editor returns values as object for Singleselect & Multiselect in child object(complex objects) in Slickgrid

In my case, I try to handle inline edit for Singleselect & Multiselect fields in child objects(complex objects) it returns the values in object format.For simple object it returns the exact values which is selected.

Values return for child object(complex object): Child Object

Column Definition:

{
             id: this.tableColumnInfo[this.__parentobj01$tableName]['pfm775773_gender_11035840']['id'],
             nameKey: lodash.escape(this.translateService.instant(this.tableColumnInfo[this.__parentobj01$tableName]['pfm775773_gender_11035840']['label'])),
             field: this.tableColumnInfo[this.__parentobj01$tableName]['pfm775773_gender_11035840']['prop'],
             toolTip: this.slickgridUtils.convertSplCharToEntities(this.translateService.instant(this.tableColumnInfo[this.__parentobj01$tableName]['pfm775773_gender_11035840']['label']), 'fromEntity'),
             sortable: true,
             type: FieldType.string,
             sortComparer: cspfmSlickgridSortComparer.StringSortComparer,


             exportCustomFormatter: CspfmDataExportFormatter,
             exportWithFormatter: true,

             // minWidth: this.columnMinWidth,
             formatter: CspfmDataFormatter,
             queryField: this.tableColumnInfo[this.__parentobj01$tableName]['pfm775773_gender_11035840']['prop'] + appConstant['customFieldSuffix']['slickgrid'],
             filterable: true,
             filter: {
                 collection: this.slickgridUtils.getLabelValue(this.tableColumnInfo[this.__parentobj01$tableName]['pfm775773_gender_11035840']['mappingDetails']),

                 enableTranslateLabel: true,
                 model: Filters.multipleSelect
             },
             grouping: < cspfmDataGrouping > {
                 getter: (data) => {
                     return this.slickgridUtils.getter(data, this.tableColumnInfo[this.__parentobj01$tableName]['pfm775773_gender_11035840'])
                 },
                 formatter: (groupingFormatterItem: GroupingFormatterItem) => {
                     return this.slickgridUtils.formatter(groupingFormatterItem, this.tableColumnInfo[this.__parentobj01$tableName]['pfm775773_gender_11035840']['label'])
                 },
                 params: {
                     id: this.tableColumnInfo[this.__parentobj01$tableName]['pfm775773_gender_11035840']['id']
                 },
                 collapsed: false
             },
             cssClass: 'left-align cs-slickgrid-inline-edit-pointer',

             editor: {
                 model: Editors.singleSelect,
                 collection: this.slickgridUtils.getKeyValue(this.tableColumnInfo[this.__parentobj01$tableName]['pfm775773_gender_11035840']['mappingDetails']),
                 enableTranslateLabel: true,
             },
             params: {
                 isHiddenEnabled: 'N',
                 columnWidth: 100,
                 required: false,
                 pipe: this.cspfmDataDisplay,
                 fieldInfo: this.tableColumnInfo[this.__parentobj01$tableName]['pfm775773_gender_11035840'],
                 layoutId: this.layoutId


             }

         }

TableColumn Info:

"pfm775773_gender_11035840": {
                 "child": {
                     "id": "gender",
                     "label": "Inline_Edit_List01_WEB_List.Element.parentobj01_DUMMY$$childobj01_parentobj$$gender.gender",
                     "fieldName": "gender",
                     "prop": "gender",
                     "fieldType": "RADIO",
                     "objectName": "childobj01",
                     "elementid": 11035840,
                     "traversalpath": "parentobj01_DUMMY$$childobj01_parentobj$$gender",
                     "child": "",
                     "dateFormat": "",
                     "mappingDetails": this.gender_1717578_11035840,
                     "currencyDetails": "",
                     "boxStyle": "",
                     "valueStyle": ""
                 },
                 "id": "pfm775773s_0_gender",
                 "prop": "pfm775773s.0.gender",
                 "label": "Inline_Edit_List01_WEB_List.Element.parentobj01_DUMMY$$childobj01_parentobj$$gender.gender",
                 "elementid": 11035840,
                 "mappingDetails": this.gender_1717578_11035840,
                 "traversalpath": "parentobj01_DUMMY$$childobj01_parentobj$$gender",
                 "dateFormat": "",
                 "currencyDetails": "",
                 "fieldName": "pfm775773s",
                 "fieldType": "MASTERDETAIL",
                 "objectName": "childobj01"
             }

Method in selectEditor.js:

get currentValues() {
        var _a, _b, _c, _d, _e;
        const elmValue = (_a = this.$editorElm) === null || _a === void 0 ? void 0 : _a.val();
        // collection of strings, just return the filtered string that are equals
        if (this.collection.every(x => typeof x === 'string')) {
            return this.collection.filter(c => elmValue.indexOf(c === null || c === void 0 ? void 0 : c.toString()) !== -1);
        }
        // collection of label/value pair
        const separatorBetweenLabels = (_c = (_b = this.collectionOptions) === null || _b === void 0 ? void 0 : _b.separatorBetweenTextLabels) !== null && _c !== void 0 ? _c : '';
        const isIncludingPrefixSuffix = (_e = (_d = this.collectionOptions) === null || _d === void 0 ? void 0 : _d.includePrefixSuffixToSelectedValues) !== null && _e !== void 0 ? _e : false;
        return this.collection
            .filter(c => { var _a; return elmValue.indexOf(c.hasOwnProperty(this.valueName) && ((_a = c[this.valueName]) === null || _a === void 0 ? void 0 : _a.toString())) !== -1; })
            .map(c => {
            var _a, _b, _c, _d;
            const labelText = c[this.valueName];
            let prefixText = c[this.labelPrefixName] || '';
            let suffixText = c[this.labelSuffixName] || '';
            // when it's a complex object, then pull the object name only, e.g.: "user.firstName" => "user"
            const fieldName = (_b = (_a = this.columnDef) === null || _a === void 0 ? void 0 : _a.field) !== null && _b !== void 0 ? _b : '';
            // is the field a complex object, "address.streetNumber"
            const isComplexObject = (fieldName === null || fieldName === void 0 ? void 0 : fieldName.indexOf('.')) > 0;
            const serializeComplexValueFormat = (_d = (_c = this.columnEditor) === null || _c === void 0 ? void 0 : _c.serializeComplexValueFormat) !== null && _d !== void 0 ? _d : 'object';
            if (isComplexObject && typeof c === 'object' && serializeComplexValueFormat === 'object') {
                return c;
            }
            // also translate prefix/suffix if enableTranslateLabel is true and text is a string
            prefixText = (this.enableTranslateLabel && this._translaterService && prefixText && typeof prefixText === 'string') ? this._translaterService.translate(prefixText || ' ') : prefixText;
            suffixText = (this.enableTranslateLabel && this._translaterService && suffixText && typeof suffixText === 'string') ? this._translaterService.translate(suffixText || ' ') : suffixText;
            if (isIncludingPrefixSuffix) {
                const tmpOptionArray = [prefixText, labelText, suffixText].filter((text) => text); // add to a temp array for joining purpose and filter out empty text
                return tmpOptionArray.join(separatorBetweenLabels);
            }
            return labelText;
        });
    }
    /**
     * The current selected values (single select) from the collection
     */
    get currentValue() {
        var _a, _b, _c, _d, _e, _f;
        const elmValue = this.$editorElm.val();
        const fieldName = this.columnDef && this.columnDef.field;
        if (fieldName !== undefined) {
            // collection of strings, just return the filtered string that are equals
            if (this.collection.every(x => typeof x === 'string')) {
                return findOrDefault(this.collection, (c) => { var _a; return ((_a = c === null || c === void 0 ? void 0 : c.toString) === null || _a === void 0 ? void 0 : _a.call(c)) === elmValue; });
            }
            // collection of label/value pair
            const separatorBetweenLabels = (_b = (_a = this.collectionOptions) === null || _a === void 0 ? void 0 : _a.separatorBetweenTextLabels) !== null && _b !== void 0 ? _b : '';
            const isIncludingPrefixSuffix = (_d = (_c = this.collectionOptions) === null || _c === void 0 ? void 0 : _c.includePrefixSuffixToSelectedValues) !== null && _d !== void 0 ? _d : false;
            const itemFound = findOrDefault(this.collection, (c) => { var _a; return c.hasOwnProperty(this.valueName) && ((_a = c[this.valueName]) === null || _a === void 0 ? void 0 : _a.toString()) === elmValue; });
            // is the field a complex object, "address.streetNumber"
            const isComplexObject = (fieldName === null || fieldName === void 0 ? void 0 : fieldName.indexOf('.')) > 0;
            const serializeComplexValueFormat = (_f = (_e = this.columnEditor) === null || _e === void 0 ? void 0 : _e.serializeComplexValueFormat) !== null && _f !== void 0 ? _f : 'object';
            if (isComplexObject && typeof itemFound === 'object' && serializeComplexValueFormat === 'object') {
                return itemFound;
            }
            else if (itemFound && itemFound.hasOwnProperty(this.valueName)) {
                const labelText = itemFound[this.valueName];
                if (isIncludingPrefixSuffix) {
                    let prefixText = itemFound[this.labelPrefixName] || '';
                    let suffixText = itemFound[this.labelSuffixName] || '';
                    // also translate prefix/suffix if enableTranslateLabel is true and text is a string
                    prefixText = (this.enableTranslateLabel && this._translaterService && prefixText && typeof prefixText === 'string') ? this._translaterService.translate(prefixText || ' ') : prefixText;
                    suffixText = (this.enableTranslateLabel && this._translaterService && suffixText && typeof suffixText === 'string') ? this._translaterService.translate(suffixText || ' ') : suffixText;
                    // add to a temp array for joining purpose and filter out empty text
                    const tmpOptionArray = [prefixText, labelText, suffixText].filter((text) => text);
                    return tmpOptionArray.join(separatorBetweenLabels);
                }
                return labelText;
            }
        }
        return '';
    }

In selectEditor.js currentValues() and currentValue() methods return the selected values in object format.

Software versions:

Expected output for Singleselect and Multipleselect to return the value selected.

Expected return values: Parent Object

Upvotes: 0

Views: 63

Answers (1)

ghiscoding
ghiscoding

Reputation: 13204

I don't fully understand what your problem is, ie is it a UI problem or a Save problem? Anyway, have you take a look at the Select Editor - Complex Object Wiki? Also just to point out, with complex object, you typically have to use the Formatters.complexObject to show it correctly in the UI and I see that you're using a custom formatter which might be your problem (note you can also combine formatters with Formatters.multiple), you can get more details on the Formatters Wiki. In summary, there's a lot of infos in the Wikis and you will probably find many answers to your questions

From the Select Editor - Complex Object Wiki, you can try serializeComplexValueFormat and Formatters.complexObject this

this.columnDefinitions = [{
  id: 'firstName', name: 'First Name', field: 'user.firstName',
  formatter: Formatters.complexObject, // the complex formatter is necessary, unless you provide a custom formatter
  editor: {
    model: Editors.SingleSelect,
    complexObjectPath: 'user.middleName',
    serializeComplexValueFormat: 'flat' // (flat) will return 'Bob', (object) will return { label: 'Bob', value: 'Bob' }
  }
}];

Upvotes: 0

Related Questions