IgxGrid – IgxGridEditingActions による行編集機能の有効・無効切り替え

Ignite UI for Angular 14.0.0 バージョン時点での情報に基づいています。

IgxGrid では IgxActionStrip に機能を加えることで、行操作メニューを加えることができます。IgxActionStrip 配下に、IgxGridEditingActions を設定し、行編集メニューをカスタマイズすることができます。

editRow・・・行編集ボタンの表示/非表示

deleteRow・・・行削除ボタンの表示/非表示

<igx-grid #grid [data]="data" width="100%" height="500px"
	[primaryKey]="'ProductID'" [rowEditable]="true">
	<igx-column ...></igx-column>
	<igx-column ...></igx-column>
	<igx-column ...></igx-column>
	<igx-action-strip #actionstrip>
	    <igx-grid-editing-actions
	     [editRow]="isEditRowEnabled" 
	     [deleteRow]="isDeleteRowEnabled"
	     [addRow]="true"></igx-grid-editing-actions>
	</igx-action-strip>
</igx-grid>