fix(insert): add item to bottom position should highlight correctly

src/app/examples/grid-additem.component.ts

@@ -159,8 +159,8 @@ export class GridAddItemComponent implements OnInit {
     this.dataset = mockedDataset;
   }
 
-  addNewItem(insertPosition?: 'top' | 'bottom') {
-    const newId = this.dataset.length;
+  createNewItem(newId: number) {
+    // const newId = this.dataset.length;
     const randomYear = 2000 + Math.floor(Math.random() * 10);
     const randomMonth = Math.floor(Math.random() * 11);
     const randomDay = Math.floor((Math.random() * 29));
@@ -176,7 +176,14 @@ export class GridAddItemComponent implements OnInit {
       finish: new Date(randomYear, (randomMonth + 2), randomDay),
       effortDriven: true
     };
-    this.angularGrid.gridService.addItem(newItem, { position: insertPosition });
+    return newItem;
+  }
+
+  addNewItem(insertPosition?: 'top' | 'bottom') {
+    const newItem1 = this.createNewItem(this.dataset.length + 1);
+    const newItem2 = this.createNewItem(this.dataset.length + 2);
+    // this.angularGrid.gridService.addItems([newItem1, newItem2], { position: insertPosition });
+    this.angularGrid.gridService.addItems(newItem1, { position: insertPosition });
   }
 
   highlighFifthRow() {

src/app/modules/angular-slickgrid/services/__tests__/grid.service.spec.ts

@@ -50,6 +50,8 @@ const gridStub = {
   getSelectionModel: jest.fn(),
   setSelectionModel: jest.fn(),
   getSelectedRows: jest.fn(),
+  navigateBottom: jest.fn(),
+  navigateTop: jest.fn(),
   render: jest.fn(),
   setColumns: jest.fn(),
   setSelectedRows: jest.fn(),
@@ -378,6 +380,7 @@ describe('Grid Service', () => {
 
     it('should expect the service to call the "addItem" multiple times when calling "addItems" with an array of items', () => {
       const mockItems = [{ id: 0, user: { firstName: 'John', lastName: 'Doe' } }, { id: 5, user: { firstName: 'Jane', lastName: 'Doe' } }];
+      jest.spyOn(dataviewStub, 'getRowById').mockReturnValue(0).mockReturnValueOnce(0).mockReturnValueOnce(1).mockReturnValueOnce(1);
       const serviceAddSpy = jest.spyOn(service, 'addItem');
       const serviceHighlightSpy = jest.spyOn(service, 'highlightRow');
       const rxSpy = jest.spyOn(service.onItemAdded, 'next');
@@ -392,6 +395,27 @@ describe('Grid Service', () => {
       expect(rxSpy).toHaveBeenCalledWith(mockItems);
     });
 
+    it('should expect the service to call the "addItem" multiple times when calling "addItems" with an array of items and the option "position" set to "bottom"', () => {
+      const expectationNewRowPosition1 = 1000;
+      const expectationNewRowPosition2 = 1001;
+      const mockItems = [{ id: 0, user: { firstName: 'John', lastName: 'Doe' } }, { id: 5, user: { firstName: 'Jane', lastName: 'Doe' } }];
+      jest.spyOn(dataviewStub, 'getRowById')
+        .mockReturnValueOnce(expectationNewRowPosition1).mockReturnValueOnce(expectationNewRowPosition1)
+        .mockReturnValueOnce(expectationNewRowPosition2).mockReturnValueOnce(expectationNewRowPosition2);
+      const serviceAddSpy = jest.spyOn(service, 'addItem');
+      const serviceHighlightSpy = jest.spyOn(service, 'highlightRow');
+      const rxSpy = jest.spyOn(service.onItemAdded, 'next');
+
+      service.addItems(mockItems, { position: 'bottom' });
+
+      expect(serviceAddSpy).toHaveBeenCalledTimes(2);
+      expect(serviceAddSpy).toHaveBeenNthCalledWith(1, mockItems[0], { highlightRow: false, position: 'bottom', resortGrid: false, selectRow: false, triggerEvent: false });
+      expect(serviceAddSpy).toHaveBeenNthCalledWith(2, mockItems[1], { highlightRow: false, position: 'bottom', resortGrid: false, selectRow: false, triggerEvent: false });
+      expect(serviceHighlightSpy).toHaveBeenCalledTimes(1);
+      expect(serviceHighlightSpy).toHaveBeenCalledWith([expectationNewRowPosition1, expectationNewRowPosition2]);
+      expect(rxSpy).toHaveBeenCalledWith(mockItems);
+    });
+
     it('should expect the service to call the "addItem" when calling "addItems" with a single item which is not an array', () => {
       const mockItem = { id: 0, user: { firstName: 'John', lastName: 'Doe' } };
       const serviceAddSpy = jest.spyOn(service, 'addItem');
@@ -443,6 +467,7 @@ describe('Grid Service', () => {
 
     it('should expect the row to be selected when calling "addItems" with an item when setting the "selecRow" flag and the grid option "enableRowSelection" is set', () => {
       const mockItem = { id: 0, user: { firstName: 'John', lastName: 'Doe' } };
+      jest.spyOn(dataviewStub, 'getRowById').mockReturnValue(0);
       jest.spyOn(gridStub, 'getOptions').mockReturnValue({ enableAutoResize: true, enableRowSelection: true } as GridOption);
       const addSpy = jest.spyOn(dataviewStub, 'insertItem');
       const selectSpy = jest.spyOn(gridStub, 'setSelectedRows');

src/app/modules/angular-slickgrid/services/grid.service.ts

@@ -346,23 +346,16 @@ export class GridService {
     // do we want the item to be sorted in the grid, when set to False it will insert on first row (defaults to false)
     if (options.resortGrid) {
       this._dataView.reSort();
-
-      // 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
-      if (options.highlightRow) {
-        items.forEach((item: any) => {
-          const rowNumber = this._dataView.getRowById(item.id);
-          rowNumbers.push(rowNumber);
-        });
-      }
-    } else if (options.highlightRow) {
-      const ln = items.length;
-      for (let i = 0; i < ln; i++) {
-        rowNumbers.push(i);
-      }
     }
 
-    // do user want to highlight the rows
+    // scroll to row index 0 when inserting on top else scroll to the bottom where it got inserted
+    (options && options.position === 'bottom') ? this._grid.navigateBottom() : this._grid.navigateTop();
+
+    // 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)));
+
+    // if user wanted to see highlighted row
     if (options.highlightRow) {
       this.highlightRow(rowNumbers);
     }