React Grid の行操作
React Grid の Ignite UI for React 行操作機能を使用すると、開発者は IgrActionStrip
を使用し、行/セル コンポーネントと行のピン固定に CRUD を利用できます。これらの操作 (編集とピン固定) には、IgrGrid
の特定の行に適用できる事前定義された UI コントロールがいくつかあります。
使用方法
事前定義された操作 (actions) UI コンポーネントは次のとおりです:
IgrGridEditingActions
-IgrGrid
編集専用に設計された機能と UI を含みます。rowEditable
オプションとIgrGrid
の行削除に応じて、セルまたは行の編集モードをすばやく切り替えることができます。IgrGridPinningActions
-IgrGrid
ピン固定専用に設計された機能と UI を含みます。行をすばやくピン固定し、ピン固定された行とその無効な行の間を移動できます。
これらは IgrGrid
内に追加され、デフォルトのインタラクションを提供する IgrActionStrip
プを持つために必要です。
<IgrGrid id="grid" rowEditable="true" primaryKey="ID">
<IgrColumn field="field">
</IgrColumn>
<IgrActionStrip name="actionStrip">
<IgrGridPinningActions></IgrGridPinningActions>
<IgrGridEditingActions></IgrGridEditingActions>
</IgrActionStrip>
</IgrGrid>
[!Note]
ActionStripComponent
がIgrGrid
の子コンポーネントの場合、行をホバーすると UI が自動的に表示されます。
カスタムの実装
これらのコンポーネントは、カスタマイズのための柔軟性を提供するテンプレートを公開します。たとえば、delete、edit などの行アクションがある Gmail シナリオで IgrActionStrip
を使用する場合、アイコンでボタン コンポーネントを作成します。そして、クリック イベントを追加し、IgrActionStrip
に挿入します。
<IgrGrid>
<IgrActionStrip name="actionStrip">
<IgrGridPinningActions></IgrGridPinningActions>
<IgrGridEditingActions editRow="true" deleteRow="true"></IgrGridEditingActions>
</IgrActionStrip>
</IgrGrid>
API リファレンス
コミュニティに参加して新しいアイデアをご提案ください。