Клавиши навигации Shift + Enter устанавливают фокус на две ячейки в редактируемом столбце ag-Grid в Angular 9 - PullRequest
Новая
       180

Клавиши навигации Shift + Enter устанавливают фокус на две ячейки в редактируемом столбце ag-Grid в Angular 9

0 голосов
/ 30 мая 2020

Я использую ag-Grid с редактируемым столбцом «Стоимость». Требования указаны ниже:

  • Если пользователь редактирует значение в любой ячейке этого столбца и нажимает клавишу «Enter», фокус должен переместиться на ячейку ниже в том же столбце и превратить его в режим редактирования (я могу добиться этого без каких-либо проблем)
  • Если пользователь редактирует значение в любой ячейке этого столбца и нажимает клавиши Shift + Enter, фокус должен переместиться в ячейку выше в тот же столбец и преобразовать его в режим редактирования

В сценарии «Shift + Enter» фокус перемещается на ячейку выше и переводит ее в режим редактирования, но фокус также устанавливается на ячейку в две строки ниже в том же столбце, т.е. две ячейки в столбце теперь имеют фокус, одна в режиме редактирования (мне это нужно) и одна в режиме без редактирования (у меня этого не должно быть), как показано на изображении ниже

enter image description here

Код в файле html: 

<ag-grid-angular
   #agGrid
   style="width:100%; height:100vh"
   id="myGrid"
   class="ag-theme-balham-dark"
   [columnDefs]="columnDefs"
   [defaultColDef]="defaultColDef"
   [singleClickEdit]="true"
   [enterMovesDown]="true"
   [enterMovesDownAfterEdit]="true"
   [autoGroupColumnDef]="autoGroupColumnDef"
   [treeData]="true"
   [rowData]="rowData"
   [groupDefaultExpanded]="groupDefaultExpanded"
   [getDataPath]="getDataPath"
   (cellValueChanged)="onCellValueChanged($event)"
   (keyup)="onKeyUp($event)"
   (gridReady)="onGridReady($event)"
   >
</ag-grid-angular>

Я использую для этого событие 'keyup' и код внутри 'onKeyUp 'функция в файле компонента: 

onKeyUp(e) {
  if(e.key === 'Enter') {
    if(e.shiftKey) {
      this.gridApi.startEditingCell({
        rowIndex: (this.gridApi.getFocusedCell().rowIndex - 2),
        colKey: this.gridApi.getFocusedCell().column.colId
      });
    }
    else {
      this.gridApi.startEditingCell({
        rowIndex: this.gridApi.getFocusedCell().rowIndex,
        colKey: this.gridApi.getFocusedCell().column.colId
      });
    }
  }
}
* 102 1 * Я хочу избавиться от фокуса, установленного на ячейку на две строки ниже фактической ячейки в режиме редактирования, как показано на изображении. Пожалуйста, помогите мне с этим.

1 Ответ

0 голосов
/ 30 мая 2020

Я наконец-то смог решить проблему. Найдите rowIndex и colKey для текущей строки, а затем используйте clearFocusedCell (), чтобы очистить ненужный фокус перед преобразованием требуемой ячейки в режим редактирования. 

onKeyUp(e) {
 if(e.key === 'Enter') {
  if(e.shiftKey) {
     var rowIndex = this.gridApi.getFocusedCell().rowIndex;  <-- Added line 
     var colKey = this.gridApi.getFocusedCell().column.colId  <-- Added line
     this.gridApi.clearFocusedCell();  <-- Added line

     this.gridApi.startEditingCell({
       rowIndex: (rowIndex - 2),
       colKey: colKey
     });
  }
  else {
     this.gridApi.startEditingCell({
       rowIndex: this.gridApi.getFocusedCell().rowIndex,
       colKey: this.gridApi.getFocusedCell().column.colId
     });
  }
 }
}
...