ag grid scroll to newly created item and highlight the row

Question

I'm using ag-grid in angular for CRUD operation application. When I create a new item, it will update in the grid but once update the item scrollbar should scroll to the new item position and that new item row should be highlighted.

Expert advise please?

HTML

<ag-grid-angular style="width: 100%; height: 100%;" class="ag-theme-balham" [defaultColDef]="defaultColDef"
      [columnDefs]="columnDefs" [rowSelection]="rowSelection" [rowData]="rowData" [suppressMenuHide]="true"  [rowDragManaged]="true"
     [frameworkComponents]="frameworkComponents" (selectionChanged)="onSelectionChanged()"
      (rowClicked)='onRowClicked($event)' (gridReady)="onGridReady($event)" [gridOptions]="gridOptions">
    </ag-grid-angular>

TS

ngAfterViewInit(): void {
    this.gridOptions.api.setColumnDefs([
      {
        headerName: "",
        field: "markedAsFavorite",
        minWidth: 50,
        maxWidth: 50,
        headerComponentParams: { menuIcon: "fa-star" },
        cellRendererFramework: DisciplinesCellComponent,
        cellRendererParams: {
          ngTemplate: this.greetCell
        }
      },
      {
        headerName: "Disciplines",
        field: "name", valueGetter: (params) => params.data.name.en,
      },
      {
        headerName: "Market",
        field: "market", valueGetter: (params) => params.data.markets.name,
      },
      {
        headerName: "Description",
        field: "description", valueGetter: (params) => params.data.description.en
      }
    ]);
  }

Code posted. Looking for, If it is any default option in ag-grid or Do we need to create custom component? — klmuralimohan

Dilani Alwis Dilani Alwis · Accepted Answer · 2019-06-14T12:57:49

You can use RowDataTransaction and ensureIndexVisible provided in ag-grid to achieve this.

  onAddNewRow(data: any) {
    if (this.gridOptions && this.gridOptions.api) {
      const addedRow = this.gridOptions.api.updateRowData({
        add: [data]
      });
      addedRow.add[0].setSelected(true);
      this.gridOptions.api.ensureIndexVisible(addedRow.add[0].rowIndex, 'bottom');
    }
  }

Here updateRowDate will return an object with the structure of

interface RowDataTransaction {

    // Row Nodes added
    add: RowNode[];

    // Row Nodes removed
    remove: RowNode[];

    // Row Nodes updated
    update: RowNode[];
}

Since you are adding a single row you can access it from the element at the 0 index. By passing the index of the newly added row to the method ensureIndexVisible you can scroll down to that specific row.

ag grid scroll to newly created item and highlight the row

1 Answers