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] ActionStripComponentIgrGrid の子コンポーネントの場合、行をホバーすると UI が自動的に表示されます。

    カスタムの実装

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

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

    API リファレンス

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