React Hierarchical Grid の行操作

React Hierarchical Grid の Ignite UI for React 行操作機能を使用すると、開発者は IgrActionStrip を使用し、行/セルコンポーネントと行のピン固定に CRUD を利用できます。これらの操作 (編集とピン固定) には、IgrHierarchicalGrid の特定の行に適用できる事前定義された UI コントロールがいくつかあります。

使用方法

事前定義された操作 (actions) UI コンポーネントは次のとおりです:

IgrGridEditingActions - IgrHierarchicalGrid 編集専用に設計された機能と UI を含みます。rowEditable オプションと IgrHierarchicalGrid の行削除に応じて、セルまたは行の編集モードをすばやく切り替えることができます。
IgrGridPinningActions - IgrHierarchicalGrid ピン固定専用に設計された機能と UI を含みます。行をすばやくピン固定し、ピン固定された行とその無効な行の間を移動できます。

これらは IgrHierarchicalGrid 内に追加され、デフォルトのインタラクションを提供する IgrActionStrip プを持つために必要です。

<IgrHierarchicalGrid id="hierarchicalGrid" rowEditable="true" primaryKey="ID">
    <IgrColumn field="field">
    </IgrColumn>
    <IgrActionStrip name="actionStrip">
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions></IgrGridEditingActions>
    </IgrActionStrip>
</IgrHierarchicalGrid>

[!Note] ActionStripComponent が IgrHierarchicalGrid の子コンポーネントの場合、行をホバーすると UI が自動的に表示されます。

カスタムの実装

これらのコンポーネントは、カスタマイズのための柔軟性を提供するテンプレートを公開します。たとえば、delete、edit などの行アクションがある Gmail シナリオで IgrActionStrip を使用する場合、アイコンでボタンコンポーネントを作成します。そして、クリックイベントを追加し、IgrActionStrip に挿入します。

<IgrHierarchicalGrid>
    <IgrActionStrip name="actionStrip">
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions editRow="true" deleteRow="true"></IgrGridEditingActions>
    </IgrActionStrip>
</IgrHierarchicalGrid>

API リファレンス

コミュニティに参加して新しいアイデアをご提案ください。