Сетка сетки выделите вновь созданный элемент и выделите строку

Question

Я использую ag-grid in angular для работы с CRUD.Когда я создаю новый элемент, он будет обновляться в сетке, но после обновления полоса прокрутки элемента должна перейти к новой позиции элемента, и эта новая строка элемента должна быть выделена.

Эксперт посоветуете, пожалуйста?

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
      }
    ]);
  }

Answer 1

Вы можете использовать RowDataTransaction и обеспечить InIndexVisible, предоставленный в ag-grid для достижения этой цели.

  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');
    }
  }

Здесь updateRowDate вернет объект со структурой

interface RowDataTransaction {

    // Row Nodes added
    add: RowNode[];

    // Row Nodes removed
    remove: RowNode[];

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

Поскольку вы добавляетеединственная строка, к которой вы можете получить доступ из элемента с индексом 0.Передав индекс недавно добавленной строки в метод sureIndexVisible, вы можете прокрутить вниз до этой конкретной строки.