Infragistics|Ignite UI for Angular|IgxGrid:編輯開始時使用 IgxFocus 指令聚焦單元格編輯模板

infragistics log


IgxGrid 的儲存格編輯範本預設沒有焦點。若要在儲存格編輯開始時聚焦編輯模板,請將IgxFocus 指令附加到儲存格編輯模板中要聚焦的控制項。

<igx-grid #grid1 [data]="data" width="700px"
  height="300px" displayDensity="compact">
  <igx-column field="Id" header="ID" [hidden]="true"></igx-column>
  <igx-column field="Name" header="商品名" [editable]="true">
    <!-- セル編集テンプレート -->
    <ng-template igxCellEditor let-cell="cell">
      <input type="text" [value]="cell.value"
      (change)="cell.update($event.target.value)" style="width: 100%;"
      [igxFocus]="cell.focused"><!-- IgxFocus ディレクティブを添付 -->
    </ng-template>
  </igx-column>
  <igx-column field="Price" header="価格" [editable]="true">
  </igx-column>
  <igx-column field="IsActive" header="アクティブ" [editable]="true"></igx-column>
</igx-grid>


結果



延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言