@zeedhi/common 1.109.0 → 1.109.1

package/dist/zd-common.esm.js

@@ -5625,6 +5625,18 @@ class Column extends Component {
         super.onBeforeDestroy();
         (_a = this.lookupDatasource) === null || _a === void 0 ? void 0 : _a.destroy();
     }
+    /**
+     * Retrieves a row from lookup using its key
+     * @returns the row object when found, null when it is not found or empty
+     */
+    getLookupRow(value) {
+        const row = this.lookupData[value];
+        if (!row)
+            return null;
+        if (Object.keys(row).length === 0)
+            return null;
+        return row;
+    }
 }
 
 /**
@@ -5924,98 +5936,6 @@ class GridColumn extends Column {
         }
     }
 }
-FormatterParserProvider.registerFormatter('column_ZdSelect', ({ column, value, row, componentProps, }) => {
-    if (value === null || value === undefined)
-        return '';
-    const { dataText, formatterDataText, dataTextSeparator, dataValue, dataTextDiscrete, foreignColumns, } = componentProps;
-    let currentRow = row;
-    const dataTextColumns = Array.isArray(dataText) ? dataText : [dataText];
-    if (dataValue) {
-        const columns = Array.isArray(formatterDataText) ? formatterDataText : [formatterDataText];
-        if (foreignColumns) {
-            const loopkupRow = {};
-            dataTextColumns.forEach((item) => {
-                const dataTextName = typeof item === 'string' ? item : item.name;
-                loopkupRow[dataTextName] = currentRow[foreignColumns[dataTextName] || dataTextName];
-            });
-            loopkupRow[dataValue] = currentRow[column.name];
-            column.lookupData[currentRow[column.name]] = loopkupRow;
-        }
-        else if (!formatterDataText) {
-            currentRow = column.getLookupData(dataValue, value[dataValue] || value);
-        }
-        else if (columns.length === dataTextColumns.length) {
-            const loopkupRow = {};
-            columns.forEach((item, index) => {
-                const dataTextValue = dataTextColumns[index];
-                const dataTextName = typeof dataTextValue === 'string' ? dataTextValue : dataTextValue.name;
-                loopkupRow[dataTextName] = currentRow[typeof item === 'string' ? item : item.name];
-            });
-            loopkupRow[dataValue] = currentRow[column.name];
-            column.lookupData[currentRow[column.name]] = loopkupRow;
-        }
-    }
-    if (!Object.keys(currentRow).length)
-        return typeof value === 'object' ? '' : value;
-    let dataTextForeign = dataText;
-    if (dataText && foreignColumns) {
-        if (typeof dataText === 'string') {
-            dataTextForeign = foreignColumns[dataText] || dataText;
-        }
-        else {
-            dataTextForeign = dataTextColumns.map((item) => {
-                const itemName = typeof item === 'string' ? item : item.name;
-                return foreignColumns[itemName] || itemName;
-            });
-        }
-    }
-    const textColumn = dataTextDiscrete || formatterDataText || dataTextForeign;
-    if (!textColumn)
-        return value;
-    if (typeof textColumn === 'string') {
-        return currentRow[textColumn] || value;
-    }
-    const formatterFn = FormatterParserProvider.getFormatter('ZdSelect');
-    return formatterFn(currentRow, { dataText: textColumn, dataTextSeparator });
-});
-FormatterParserProvider.registerFormatter('column_ZdSelectMultiple', ({ column, value, row, componentProps, }) => {
-    if (!value || !Array.isArray(value) || value.length === 0)
-        return '';
-    const { formatterDataText, foreignColumns, dataText } = componentProps;
-    const formatterFn = FormatterParserProvider.getFormatter('column_ZdSelect');
-    const result = value.map((item, index) => {
-        let formatterRow = Object.assign({}, row);
-        const rowOverride = {};
-        if (formatterDataText && formatterDataText.length > 0) {
-            const columns = Array.isArray(formatterDataText) ? formatterDataText : [formatterDataText];
-            columns.forEach((col) => {
-                const textName = typeof col === 'string' ? col : col.name;
-                rowOverride[textName] = row[textName][index];
-            });
-            formatterRow = Object.assign(Object.assign({}, row), rowOverride);
-        }
-        else if (foreignColumns && dataText) {
-            let dataTextForeign = dataText;
-            if (typeof dataText === 'string') {
-                dataTextForeign = [foreignColumns[dataText] || dataText];
-            }
-            else {
-                dataTextForeign = dataText.map((col) => {
-                    const colName = typeof col === 'string' ? col : col.name;
-                    return foreignColumns[colName] || colName;
-                });
-            }
-            dataTextForeign.forEach((col) => {
-                rowOverride[col] = row[col][index];
-            });
-            formatterRow = Object.assign(Object.assign({}, row), rowOverride);
-        }
-        return formatterFn({
-            column, value: item, row: formatterRow, componentProps,
-        });
-    });
-    return result.join(', ');
-});
 const toggleableFormatter = ({ value, componentProps }) => {
     const { trueValue, falseValue, trueIcon, falseIcon, trueDisplayValue, falseDisplayValue, } = componentProps;
     const trueDefined = isUndefined(trueValue) ? true : trueValue;
@@ -7155,23 +7075,23 @@ class GridEditable extends Grid {
         if (Array.isArray(colValue)) {
             colValue.forEach((item) => {
                 const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
-                if (column.lookupData[value]) {
-                    componentProps.datasource.data.push(column.lookupData[value]);
-                }
+                this.pushLookupRow(column, componentProps, value);
             });
             return;
         }
         if (colValue && typeof colValue === 'object'
             && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
             const value = colValue[componentProps.dataValue];
-            if (column.lookupData[value]) {
-                componentProps.datasource.data.push(column.lookupData[value]);
-            }
+            this.pushLookupRow(column, componentProps, value);
             return;
         }
-        if (column.lookupData[colValue]) {
-            componentProps.datasource.data.push(column.lookupData[colValue]);
-        }
+        this.pushLookupRow(column, componentProps, colValue);
+    }
+    pushLookupRow(column, componentProps, value) {
+        const lookupRow = column.getLookupRow(value);
+        if (!lookupRow)
+            return;
+        componentProps.datasource.data.push(lookupRow);
     }
     checkCompValidity(component) {
         if (!component.isValid()) {
@@ -12475,6 +12395,7 @@ class SelectMultiple extends Select {
         this.limit = null;
         this.showSelectAll = false;
         this.showCheckboxAll = false;
+        this.formatterFn = FormatterParserProvider.getFormatter('ZdSelectMultiple');
         this.checkboxAllValue = false;
         if (!this.selectedValue) {
             this.selectedValue = [];
@@ -12691,22 +12612,6 @@ class SelectMultiple extends Select {
         });
         this.insertsRemoved = [];
     }
-    /**
-     * Return formatted dataText and values
-     */
-    formatter(value) {
-        if (!value || value.length === 0) {
-            return [];
-        }
-        const selectFormatter = FormatterParserProvider.getFormatter('ZdSelect');
-        const formattedValue = value.map((row) => {
-            const isDisabled = this.dataDisabled && row[this.dataDisabled];
-            const formattedRow = { value: row[this.dataValue], disabled: isDisabled, originalRow: row };
-            formattedRow.text = selectFormatter(row, this);
-            return formattedRow;
-        });
-        return formattedValue;
-    }
     /**
      * Returns the text shown when there's one or more selected items that doesn't fit in the input
      */
@@ -12952,7 +12857,21 @@ class SelectMultiple extends Select {
         };
         return modalSelectionDef;
     }
-}
+}
+FormatterParserProvider.registerFormatter('ZdSelectMultiple', (value, props) => {
+    const { dataDisabled, dataValue } = props;
+    if (!value || value.length === 0) {
+        return [];
+    }
+    const selectFormatter = FormatterParserProvider.getFormatter('ZdSelect');
+    const formattedValue = value.map((row) => {
+        const isDisabled = dataDisabled && row[dataDisabled];
+        const formattedRow = { value: row[dataValue], disabled: isDisabled, originalRow: row };
+        formattedRow.text = selectFormatter(row, props);
+        return formattedRow;
+    });
+    return formattedValue;
+});
 
 /**
  * Base class for Select Tree  component.
@@ -13043,7 +12962,6 @@ class SelectTree extends TextInput {
          * Defines if should wait and not execute GET method when Datasource is created
          */
         this.lazyLoad = true;
-        this.selectValue = null;
         /**
          * Uses delayed loading to load tree branches
          */
@@ -13064,7 +12982,9 @@ class SelectTree extends TextInput {
          * Defines the name of the form target to set using dataValueOut
          */
         this.dataValueOutFormName = '';
+        this.formatterFn = FormatterParserProvider.getFormatter('ZdSelectTree');
         this.savedNodes = undefined;
+        this.search = '';
         this.debounceSearch = debounce(this.searchChange, 500);
         this.nodes = this.getInitValue('nodes', props.nodes, this.nodes);
         this.alwaysOpen = this.getInitValue('alwaysOpen', props.alwaysOpen, this.alwaysOpen);
@@ -13084,7 +13004,6 @@ class SelectTree extends TextInput {
         this.dataValue = this.getInitValue('dataValue', props.dataValue, this.dataValue);
         this.dataDisabled = this.getInitValue('dataDisabled', props.dataDisabled, this.dataDisabled);
         this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
-        this.preventLoadOnFocus = this.getInitValue('preventLoadOnFocus', props.preventLoadOnFocus, this.preventLoadOnFocus);
         this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
         this.fieldHasChild = this.getInitValue('fieldHasChild', props.fieldHasChild, this.fieldHasChild);
         this.menuMaxWidth = this.getInitValue('menuMaxWidth', props.menuMaxWidth, this.menuMaxWidth);
@@ -13102,8 +13021,21 @@ class SelectTree extends TextInput {
             this.datasource = DatasourceFactory.factory(Object.assign(Object.assign({}, props.datasource), { searchIn: props.datasource.searchIn || searchFieldNames, lazyLoad: true, loadAll: true }));
             this.createDataStructure();
         }
+        if (this.dataTextDiscrete && !Array.isArray(this.dataTextDiscrete))
+            this.dataTextDiscrete = [this.dataTextDiscrete];
+        this.discreteProps = {
+            dataText: this.dataTextDiscrete,
+            dataTextSeparator: this.dataTextSeparator,
+        };
+        this.preventLoadOnFocus = !this.datasource || !this.lazyLoad;
+        this.preventLoadOnFocus = this.getInitValue('preventLoadOnFocus', props.preventLoadOnFocus, this.preventLoadOnFocus);
+        this.value = this.getInitValue('value', props.value, this.value);
         this.createAccessors();
     }
+    /**
+     * Returns the currentRow in the dataText key
+     */
+    formatter(value, props) { return this.formatterFn(value, props !== null && props !== void 0 ? props : this); }
     focus(event, element) {
         const _super = Object.create(null, {
             focus: { get: () => super.focus }
@@ -13158,8 +13090,8 @@ class SelectTree extends TextInput {
                 children = undefined;
             }
         }
-        const dataText = this.formatRow(this.dataText, row);
-        const dataTextDiscrete = this.formatRow(this.dataTextDiscrete, row);
+        const dataText = this.formatter(row);
+        const dataTextDiscrete = this.formatter(row, this.discreteProps);
         return {
             id: row[this.dataValue],
             label: dataText,
@@ -13179,40 +13111,6 @@ class SelectTree extends TextInput {
         });
         return newNodes;
     }
-    formatRow(dataText, row) {
-        const dataTextArr = Array.isArray(dataText) ? dataText : [dataText];
-        const dataTextNames = [];
-        const masks = [];
-        dataTextArr.forEach((text) => {
-            if (typeof text === 'string') {
-                dataTextNames.push(text);
-                masks.push('');
-            }
-            else {
-                dataTextNames.push(text.name);
-                if (Accessor.isAccessorDefinition(text.mask)) {
-                    const [controller, accessor] = Accessor.getAccessor(text.mask);
-                    masks.push(Loader.getInstance(controller)[accessor]);
-                }
-                else {
-                    masks.push(text.mask);
-                }
-            }
-        });
-        const rowText = dataTextNames.reduce((result, column, index) => {
-            if (row[column]) {
-                const separator = index > 0 ? this.dataTextSeparator : '';
-                let masked = row[column];
-                if (masks[index]) {
-                    const maskValue = typeof masks[index] === 'function' ? masks[index](row[column]) : masks[index];
-                    masked = Mask.getValueWithMask(row[column], maskValue);
-                }
-                return result + separator + masked;
-            }
-            return result;
-        }, '');
-        return rowText;
-    }
     /**
      * Triggered when the menu opens
      */
@@ -13236,6 +13134,7 @@ class SelectTree extends TextInput {
      * Triggered after the search query changes
      */
     searchChange(searchQuery, element) {
+        this.search = searchQuery;
         if (this.fetchOnDemand) {
             if (!searchQuery && this.savedNodes) {
                 this.nodes = this.savedNodes;
@@ -13323,7 +13222,7 @@ class SelectTree extends TextInput {
         if (!this.selectValue)
             return this.selectValue;
         if (this.returnObject) {
-            return this.clearRow(this.selectValue.row);
+            return this.clearRow(this.selectValue.row || this.selectValue);
         }
         return this.selectValue;
     }
@@ -13370,6 +13269,8 @@ class SelectTree extends TextInput {
         }
     }
 }
+const selectFormatterFn$1 = FormatterParserProvider.getFormatter('ZdSelect');
+FormatterParserProvider.registerFormatter('ZdSelectTree', selectFormatterFn$1);
 InputFactory.register('ZdSelectTree', SelectTree);
 
 /**
@@ -13394,7 +13295,6 @@ class SelectTreeMultiple extends SelectTree {
          * Selected Nodes
          */
         this.selectedNodes = [];
-        this.selectValue = [];
         /**
          * Changes the behavior of checked nodes that will be displayed in the array of values
          */
@@ -13422,19 +13322,25 @@ class SelectTreeMultiple extends SelectTree {
         this.callEvent('onDeselect', { element, component: this, node });
     }
     get value() {
+        if (!this.selectValue)
+            return [];
         if (this.returnObject) {
-            return this.selectValue.map((value) => this.clearRow(value.row));
+            return this.selectValue.map((value) => this.clearRow(value.row || value));
         }
         return this.selectValue;
     }
     set value(value) {
-        this.selectValue = value;
+        this.setValue(value);
     }
     setValue(value) {
+        if (!value) {
+            this.selectValue = [];
+            return;
+        }
         const arrValue = Array.isArray(value) ? value : [value];
         const key = this.datasource ? this.dataValue : 'id';
         if (!this.returnObject) {
-            this.value = arrValue.map((item) => {
+            this.selectValue = arrValue.map((item) => {
                 if (typeof item === 'object') {
                     return item[key];
                 }
@@ -13442,19 +13348,27 @@ class SelectTreeMultiple extends SelectTree {
             });
             return;
         }
-        this.value = arrValue.map((item) => {
+        this.selectValue = arrValue.map((item) => {
             if (typeof item !== 'object') {
                 return { id: item };
             }
             return { id: item[key] };
         });
     }
-    getAllNodes(nodes = this.nodes) {
-        let result = nodes;
+    /**
+     * Retrieves all nodes in the tree as a flat array. Nodes that are not matched are excluded
+     * Nodes that are not matched but whose parent is matched are included
+     * @param nodes
+     * @param matched defines whether the parent of the current node branch is matched
+     * @returns all nodes in the tree as a flat array, filtering unmatched nodes
+     */
+    getAllNodes(nodes = this.nodes, matched = true) {
+        let result = [...nodes];
+        result = result.filter((node) => node.isMatched || matched);
         nodes.forEach((node) => {
             if (!node.children)
                 return;
-            const childNodes = this.getAllNodes(node.children);
+            const childNodes = this.getAllNodes(node.children, node.isMatched || matched);
             result = [...result, ...childNodes];
         });
         return result;
@@ -13462,28 +13376,96 @@ class SelectTreeMultiple extends SelectTree {
     /**
      * Dispatches select/unselect event
      */
-    onSelectAll(isSelected, event, element) {
+    onSelectAll(isSelected, event, element, nodes = this.nodes) {
         if (isSelected) {
             this.callEvent('selectedAll', { event, element, component: this });
             if (!event.defaultPrevented) {
-                this.selectAllItems();
+                this.selectAllItems(nodes);
             }
         }
         else {
             this.callEvent('unselectedAll', { event, element, component: this });
             if (!event.defaultPrevented) {
-                this.unSelectAllItems();
+                this.unSelectAllItems(nodes);
             }
         }
     }
-    selectAllItems() {
-        const allNodes = this.datasource ? this.datasource.data : this.getAllNodes();
-        this.setValue(allNodes);
+    /**
+     * Selects all items in the tree \
+     * If the component is fetchOnDemand, it will select all values from datasource.data \
+     * If not, it will select all nodes from the tree, unless the nodes to be selected are specified
+     * @param nodes nodes to be selected. These are the nodes that are currently visible in the tree
+     * (if the user is searching, selects only the searched nodes)
+     * @returns
+     */
+    selectAllItems(nodes = this.nodes) {
+        var _a;
+        if (((_a = this.datasource) === null || _a === void 0 ? void 0 : _a.data) && this.fetchOnDemand) {
+            this.setValue(this.datasource.data);
+            return;
+        }
+        const allNodes = this.getAllNodes(nodes, !this.search);
+        // merge all nodes with the current value before setting it
+        const currentValue = this.getValueAsObject();
+        const nodeMap = this.createMergeMap(currentValue, allNodes);
+        const uniqueArray = Array.from(nodeMap.values());
+        this.setValue(uniqueArray);
     }
-    unSelectAllItems() {
-        this.setValue([]);
+    /**
+     * Unelects all items in the tree \
+     * If the component is fetchOnDemand, it will select all values from datasource.data \
+     * If not, it will select all nodes from the tree, unless the nodes to be selected are specified
+     * @param nodes nodes to be selected. These are the nodes that are currently visible in the tree
+     * (if the user is searching, selects only the searched nodes)
+     * @returns
+     */
+    unSelectAllItems(nodes = this.nodes) {
+        var _a;
+        if (((_a = this.datasource) === null || _a === void 0 ? void 0 : _a.data) && this.fetchOnDemand) {
+            this.setValue([]);
+            return;
+        }
+        const allNodes = this.getAllNodes(nodes, !this.search);
+        // merge all nodes with the current value before setting it
+        const currentValue = this.getValueAsObject();
+        const nodeMap = this.createMergeMap(currentValue);
+        // remove the current visible nodes from the array
+        const valuesToRemove = allNodes.map((node) => node.id);
+        valuesToRemove.forEach((value) => {
+            nodeMap.delete(value);
+        });
+        const uniqueArray = Array.from(nodeMap.values());
+        this.setValue(uniqueArray);
     }
-}
+    /**
+     * Takes two arrays and creates a map of the unique values
+     * @returns map of a merge between the two arrays, removing duplicates
+     */
+    createMergeMap(arr1, arr2 = []) {
+        const mergedNodes = arr1.concat(arr2);
+        // filter out duplicate nodes
+        const uniqueMap = new Map();
+        mergedNodes.forEach((node) => {
+            uniqueMap.set(node.id, node);
+        });
+        return uniqueMap;
+    }
+    getValueIds() {
+        if (this.returnObject) {
+            return this.value.map((item) => item.id);
+        }
+        return this.value;
+    }
+    getValueAsObject() {
+        return this.value.map((row) => {
+            if (this.returnObject)
+                return row;
+            return { id: row };
+        });
+    }
+}
+const selectFormatterFn = FormatterParserProvider.getFormatter('ZdSelectMultiple');
+FormatterParserProvider.registerFormatter('ZdSelectTreeMultiple', selectFormatterFn);
 
 /**
  * Base class for SelectableList component.
@@ -15860,6 +15842,131 @@ class TreeGridEditable extends TreeGrid {
     }
 }
 
+const asArray = (value) => (Array.isArray(value) ? value : [value]);
+const getForeignLookupRow = (column, row, dataValue, dataTextColumns, foreignColumns) => {
+    const lookupRow = {};
+    dataTextColumns.forEach((item) => {
+        const dataTextName = typeof item === 'string' ? item : item.name;
+        lookupRow[dataTextName] = row[foreignColumns[dataTextName] || dataTextName];
+    });
+    lookupRow[dataValue] = row[column.name];
+    return lookupRow;
+};
+const getFormatterLookupRow = (column, row, dataValue, formatterDataTextColumns, dataTextColumns) => {
+    const lookupRow = {};
+    formatterDataTextColumns.forEach((item, index) => {
+        const dataTextValue = dataTextColumns[index];
+        const dataTextName = typeof dataTextValue === 'string' ? dataTextValue : dataTextValue.name;
+        const formatterDataTextColumn = typeof item === 'string' ? item : item.name;
+        lookupRow[dataTextName] = row[formatterDataTextColumn];
+    });
+    lookupRow[dataValue] = row[column.name];
+    return lookupRow;
+};
+/**
+ * Stores data in column.lookupData when using foreignColumns or formatterDataText.
+ * Makes a lookup when not using foreignColumns or formatterDataText
+ * @returns the row from grid's datasource when using foreignColumns or formatterDataText. Otherwise,
+ * returns the row from the column's component datasource
+ */
+const storeOrRetrieveLookup = (column, row, value, dataValue, componentProps) => {
+    const { dataText, foreignColumns, formatterDataText, } = componentProps;
+    const dataTextColumns = asArray(dataText);
+    // when using foreignColumns, should store foreign keys information in lookupData
+    if (foreignColumns) {
+        column.lookupData[row[column.name]] = getForeignLookupRow(column, row, dataValue, dataTextColumns, foreignColumns);
+        return row;
+    }
+    // when not using formatterDataText, should fetch data from datasource to be able to format this cell
+    if (!formatterDataText) {
+        return column.getLookupData(dataValue, value[dataValue] || value);
+    }
+    const formatterDataTextColumns = asArray(formatterDataText);
+    // when using formatterDataText, should store dataText information in lookupData
+    if (formatterDataTextColumns.length === dataTextColumns.length) {
+        const rowColumn = row[column.name];
+        column.lookupData[rowColumn] = getFormatterLookupRow(column, row, dataValue, formatterDataTextColumns, dataTextColumns);
+        return row;
+    }
+    return row;
+};
+const formatter$1 = ({ column, value, row, componentProps, }) => {
+    if (value === null || value === undefined)
+        return '';
+    const { dataText, formatterDataText, dataTextSeparator, dataValue, dataTextDiscrete, foreignColumns, } = componentProps;
+    let currentRow = row;
+    const dataTextColumns = asArray(dataText);
+    // when dataValue is defined, should try to store or retrieve row data from lookupData
+    if (dataValue) {
+        currentRow = storeOrRetrieveLookup(column, row, value, dataValue, componentProps);
+    }
+    if (!Object.keys(currentRow).length)
+        return typeof value === 'object' ? '' : value;
+    let dataTextForeign = dataText;
+    if (dataText && foreignColumns) {
+        if (typeof dataText === 'string') {
+            dataTextForeign = foreignColumns[dataText] || dataText;
+        }
+        else {
+            dataTextForeign = dataTextColumns.map((item) => {
+                const itemName = typeof item === 'string' ? item : item.name;
+                return foreignColumns[itemName] || itemName;
+            });
+        }
+    }
+    const textColumn = dataTextDiscrete || formatterDataText || dataTextForeign;
+    if (!textColumn)
+        return value;
+    if (typeof textColumn === 'string') {
+        return currentRow[textColumn] || value;
+    }
+    const formatterFn = FormatterParserProvider.getFormatter('ZdSelect');
+    return formatterFn(currentRow, { dataText: textColumn, dataTextSeparator });
+};
+FormatterParserProvider.registerFormatter('column_ZdSelect', formatter$1);
+FormatterParserProvider.registerFormatter('column_ZdSelectTree', formatter$1);
+
+const formatter = ({ column, value, row, componentProps, }) => {
+    if (!value || !Array.isArray(value) || value.length === 0)
+        return '';
+    const { formatterDataText, foreignColumns, dataText } = componentProps;
+    const formatterFn = FormatterParserProvider.getFormatter('column_ZdSelect');
+    const result = value.map((item, index) => {
+        let formatterRow = Object.assign({}, row);
+        const rowOverride = {};
+        if (formatterDataText && formatterDataText.length > 0) {
+            const columns = Array.isArray(formatterDataText) ? formatterDataText : [formatterDataText];
+            columns.forEach((col) => {
+                const textName = typeof col === 'string' ? col : col.name;
+                rowOverride[textName] = row[textName][index];
+            });
+            formatterRow = Object.assign(Object.assign({}, row), rowOverride);
+        }
+        else if (foreignColumns && dataText) {
+            let dataTextForeign = dataText;
+            if (typeof dataText === 'string') {
+                dataTextForeign = [foreignColumns[dataText] || dataText];
+            }
+            else {
+                dataTextForeign = dataText.map((col) => {
+                    const colName = typeof col === 'string' ? col : col.name;
+                    return foreignColumns[colName] || colName;
+                });
+            }
+            dataTextForeign.forEach((col) => {
+                rowOverride[col] = row[col][index];
+            });
+            formatterRow = Object.assign(Object.assign({}, row), rowOverride);
+        }
+        return formatterFn({
+            column, value: item, row: formatterRow, componentProps,
+        });
+    });
+    return result.join(', ');
+};
+FormatterParserProvider.registerFormatter('column_ZdSelectMultiple', formatter);
+FormatterParserProvider.registerFormatter('column_ZdSelectTreeMultiple', formatter);
+
 const AutoNumeric = require('@zeedhi/autonumeric/dist/autoNumeric');
 const packageContent = require('../package.json');
 VersionService.addPackageVersion(packageContent.name, packageContent.version);