fix(core): add missing use of custom datasetIdPropertyName

- do a solution search and add "datasetIdPropertyName" everywhere that it was missing

packages/common/src/editors/__tests__/dualInputEditor.spec.ts

@@ -75,7 +75,7 @@ describe('DualInputEditor', () => {
     it('should throw an error when initialize the editor without the requires params leftInput/rightInput', (done) => {
       try {
         // @ts-ignore
-        editor = new DualInputEditor({});
+        editor = new DualInputEditor({ grid: gridStub });
       } catch (e) {
         expect(e.toString()).toContain(`[Slickgrid-Universal] Please make sure that your Combo Input Editor has params defined with "leftInput" and "rightInput"`);
         done();

packages/common/src/editors/dualInputEditor.ts

@@ -9,6 +9,7 @@ import {
   EditorArguments,
   EditorValidator,
   EditorValidatorOutput,
+  GridOption,
   SlickEventHandler,
 } from '../interfaces/index';
 
@@ -34,11 +35,15 @@ export class DualInputEditor implements Editor {
   /** SlickGrid Grid object */
   grid: any;
 
+  /** Grid options */
+  gridOptions: GridOption;
+
   constructor(private args: EditorArguments) {
     if (!args) {
       throw new Error('[Slickgrid-Universal] Something is wrong with this grid, an Editor must always have valid arguments.');
     }
     this.grid = args.grid;
+    this.gridOptions = (this.grid.getOptions() || {}) as GridOption;
     this.init();
     this._eventHandler = new Slick.EventHandler();
     this._eventHandler.subscribe(this.grid.onValidationError, () => this._isValueSaveCalled = true);
@@ -140,15 +145,16 @@ export class DualInputEditor implements Editor {
   createInput(position: 'leftInput' | 'rightInput'): HTMLInputElement {
     const editorSideParams = this.editorParams[position];
     const columnId = this.columnDef && this.columnDef.id;
-    const itemId = this.args?.item?.id || 0;
+    const idPropName = this.gridOptions.datasetIdPropertyName || 'id';
+    const itemId = this.args?.item[idPropName] || 0;
 
     let fieldType = editorSideParams.type || 'text';
     if (fieldType === 'float' || fieldType === 'integer') {
       fieldType = 'number';
     }
 
     const input = document.createElement('input') as HTMLInputElement;
-    input.id = `item-${itemId}`;
+    input.id = `item-${itemId}-${position}`;
     input.className = `dual-editor-text editor-${columnId} ${position.replace(/input/gi, '')}`;
     if (fieldType === 'readonly') {
       // when the custom type is defined as readonly, we'll make a readonly text input

packages/common/src/services/__tests__/utilities.spec.ts

@@ -42,6 +42,12 @@ describe('Service/Utilies', () => {
       expect(array).toEqual([{ id: 1, firstName: 'John' }, { id: 2, firstName: 'Jane' }]);
     });
 
+    it('should add an item to the array when input item has custom Id property and is not in the array', () => {
+      const array = [{ customId: 1, firstName: 'John' }];
+      addToArrayWhenNotExists(array, { customId: 2, firstName: 'Jane' });
+      expect(array).toEqual([{ customId: 1, firstName: 'John' }, { customId: 2, firstName: 'Jane' }]);
+    });
+
     it('should add an item to the array when input item is not an object and and is not in the array', () => {
       const array = ['John'];
       addToArrayWhenNotExists(array, 'Jane');

packages/common/src/services/filter.service.ts

@@ -395,7 +395,8 @@ export class FilterService {
 
     // when using localization (i18n), we should use the formatter output to search as the new cell value
     if (columnDef && columnDef.params && columnDef.params.useFormatterOuputToFilter) {
-      const rowIndex = (dataView && typeof dataView.getIdxById === 'function') ? dataView.getIdxById(item.id) : 0;
+      const idPropName = this._gridOptions.datasetIdPropertyName || 'id';
+      const rowIndex = (dataView && typeof dataView.getIdxById === 'function') ? dataView.getIdxById(item[idPropName]) : 0;
       cellValue = (columnDef && typeof columnDef.formatter === 'function') ? columnDef.formatter(rowIndex, columnIndex, cellValue, columnDef, item, this._grid) : '';
     }
 

packages/common/src/services/grid.service.ts

@@ -149,25 +149,27 @@ export class GridService {
     this._dataView.getItemMetadata = this.getItemRowMetadataToHighlight(this._dataView.getItemMetadata);
 
     const item = this._dataView.getItem(rowNumber);
-    if (item && item.id) {
+    const idPropName = this._gridOptions.datasetIdPropertyName || 'id';
+
+    if (item && item[idPropName]) {
       item.rowClass = 'highlight';
-      this._dataView.updateItem(item.id, item);
+      this._dataView.updateItem(item[idPropName], item);
       this.renderGrid();
 
       // fade out
       clearTimeout(highlightTimerEnd);
       highlightTimerEnd = setTimeout(() => {
         item.rowClass = 'highlight-end';
-        this._dataView.updateItem(item.id, item);
+        this._dataView.updateItem(item[idPropName], item);
         this.renderGrid();
       }, fadeOutDelay);
 
       // delete the row's CSS highlight classes once the delay is passed
       setTimeout(() => {
-        if (item && item.id) {
+        if (item && item[idPropName]) {
           delete item.rowClass;
-          if (this._dataView.getIdxById(item.id) !== undefined) {
-            this._dataView.updateItem(item.id, item);
+          if (this._dataView.getIdxById(item[idPropName]) !== undefined) {
+            this._dataView.updateItem(item[idPropName], item);
             this.renderGrid();
           }
         }
@@ -303,10 +305,10 @@ export class GridService {
 
       // find the row number in the grid and if user wanted to see highlighted row
       // we need to do it here after resort and get each row number because it possibly changes after the sort
-      rowNumber = this._dataView.getRowById(item.id);
+      rowNumber = this._dataView.getRowById(item[idPropName]);
     } else {
       // scroll to row index 0 when inserting on top else scroll to the bottom where it got inserted
-      rowNumber = (options && options.position === 'bottom') ? this._dataView.getRowById(item.id) : 0;
+      rowNumber = (options && options.position === 'bottom') ? this._dataView.getRowById(item[idPropName]) : 0;
       this._grid.scrollRowIntoView(rowNumber);
     }
 
@@ -335,6 +337,7 @@ export class GridService {
    */
   addItems(items: any | any[], options?: GridServiceInsertOption): number[] {
     options = { ...GridServiceInsertOptionDefaults, ...options };
+    const idPropName = this._gridOptions.datasetIdPropertyName || 'id';
     const rowNumbers: number[] = [];
 
     // loop through all items to add
@@ -354,7 +357,7 @@ export class GridService {
 
     // get row numbers of all new inserted items
     // we need to do it after resort and get each row number because it possibly changed after the sort
-    items.forEach((item: any) => rowNumbers.push(this._dataView.getRowById(item.id)));
+    items.forEach((item: any) => rowNumbers.push(this._dataView.getRowById(item[idPropName])));
 
     // if user wanted to see highlighted row
     if (options.highlightRow) {
@@ -382,12 +385,12 @@ export class GridService {
    */
   deleteItem(item: any, options?: GridServiceDeleteOption): number | string {
     options = { ...GridServiceDeleteOptionDefaults, ...options };
-
     const idPropName = this._gridOptions.datasetIdPropertyName || 'id';
-    if (!item || !item.hasOwnProperty('id')) {
+
+    if (!item || !item.hasOwnProperty(idPropName)) {
       throw new Error(`Deleting an item requires the item to include an "${idPropName}" property`);
     }
-    return this.deleteItemById(item.id, options);
+    return this.deleteItemById(item[idPropName], options);
   }
 
   /**
@@ -398,16 +401,17 @@ export class GridService {
    */
   deleteItems(items: any | any[], options?: GridServiceDeleteOption): number[] | string[] {
     options = { ...GridServiceDeleteOptionDefaults, ...options };
+    const idPropName = this._gridOptions.datasetIdPropertyName || 'id';
 
     // when it's not an array, we can call directly the single item delete
     if (!Array.isArray(items)) {
       this.deleteItem(items, options);
-      return [items.id];
+      return [items[idPropName]];
     }
     const itemIds: string[] = [];
     items.forEach((item: any) => {
-      if (item && item.id !== undefined) {
-        itemIds.push(item.id);
+      if (item && item[idPropName] !== undefined) {
+        itemIds.push(item[idPropName]);
       }
       this.deleteItem(item, { ...options, triggerEvent: false });
     });

packages/common/src/services/treeData.service.ts

@@ -52,15 +52,15 @@ export class TreeDataService {
       const targetElm = event.target || {};
       const treeDataOptions = this.gridOptions.treeDataOptions;
       const collapsedPropName = treeDataOptions && treeDataOptions.collapsedPropName || '__collapsed';
-      const dataViewIdIdentifier = this.gridOptions.datasetIdPropertyName ?? 'id';
+      const idPropName = this.gridOptions.datasetIdPropertyName ?? 'id';
 
       if (targetElm && targetElm.className) {
         const hasToggleClass = targetElm.className.indexOf('toggle') >= 0 || false;
         if (hasToggleClass) {
           const item = this.dataView.getItem(args.row);
           if (item) {
             item[collapsedPropName] = !item[collapsedPropName] ? true : false;
-            this.dataView.updateItem(item[dataViewIdIdentifier], item);
+            this.dataView.updateItem(item[idPropName], item);
             this._grid.invalidate();
           }
           event.stopImmediatePropagation();

packages/common/src/services/utilities.ts

@@ -8,11 +8,12 @@ import { GridOption } from '../interfaces/index';
  * Add an item to an array only when the item does not exists, when the item is an object we will be using their "id" to compare
  * @param inputArray
  * @param inputItem
+ * @param itemIdPropName
  */
-export function addToArrayWhenNotExists(inputArray: any[], inputItem: any) {
+export function addToArrayWhenNotExists(inputArray: any[], inputItem: any, itemIdPropName = 'id') {
   let arrayRowIndex = -1;
-  if (typeof inputItem === 'object' && inputItem.hasOwnProperty('id')) {
-    arrayRowIndex = inputArray.findIndex((item) => item.id === inputItem.id);
+  if (typeof inputItem === 'object' && inputItem.hasOwnProperty(itemIdPropName)) {
+    arrayRowIndex = inputArray.findIndex((item) => item[itemIdPropName] === inputItem[itemIdPropName]);
   } else {
     arrayRowIndex = inputArray.findIndex((item) => item === inputItem);
   }