Web Components Tree Grid セル編集

    Web Components Tree Grid の Ignite UI for Web Components セル編集機能は、Web Components Tree Grid コンポーネント内の個々のセルのコンテンツの優れたデータ操作機能を提供し、React CRUD 操作用の強力な API を備えています。これはスプレッドシート、データ テーブル、データ グリッドなどのアプリの基本的な機能であり、ユーザーが特定のセル内のデータを追加、編集、更新できるようにします。 デフォルトでは、Ignite UI for Web Components の Grid がセル編集に使用されます。また、デフォルトのセル編集テンプレートにより、列のデータ型 「Top of Form」 に基づいて異なるエディターが存在します。

    さらに、データ更新アクション用の独自のカスタム テンプレートを定義したり、変更をコミット/破棄したりするためのデフォルトの動作をオーバーライドすることもできます。

    Web Components Tree Grid セル編集と編集テンプレートの例

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    セルの編集

    UI を介した編集

    編集可能なセルがフォーカスされたときに以下のいずれかの方法で特定のセルを編集モードにすることができます。

    • ダブル クリック
    • シングル クリック - 以前選択したセルが編集モードで現在選択したセルが編集可能な場合のみ、シングル クリックで編集モードに入ります。以前選択したセルが編集モードではない場合、編集モードに入らずにシングル クリックでセルを選択します。
    • Enter キーの押下
    • F2 キーの押下

    変更をコミットしない場合も以下の方法で編集モードを終了できます。

    • Escape キーの押下;
    • ソート、フィルターリング、検索、非表示操作の実行時。

    変更をコミットしない場合も以下の方法で編集モードを終了できます。

    • Enter キーの押下
    • F2 キーの押下
    • Tab キーの押下
    • 他のセルをシングル クリック - IgcTreeGridComponent で他のセルをクリックしたときに変更がサブミットされます。
    • その他の操作 (ページング、サイズ変更、ピン固定、移動など) は、編集モードを終了して変更を送信します。

    セルは、垂直/水平方向へのスクロールや IgcTreeGridComponent 以外をクリックした場合も編集モードのままです。セル編集と行編集両方で有効です。

    API を介した編集

    プライマリキーが定義されている場合のみ IgcTreeGridComponent API でもセル値を変更することができます。

    public updateCell() {
    this.treeGrid.updateCell(newValue, rowID, 'Age');
}
typescript

    セルを更新するその他の方法として Cell の Update メソッドで直接更新する方法があります。

    public updateCell() {
    const cell = this.treeGrid.getCellByColumn(rowIndex, 'Age');
    // You can also get cell by rowID if primary key is defined
    // const cell = this.treeGrid.getCellByKey(rowID, 'Age');
    cell.update(9999);
}
typescript

    セル編集テンプレート

    デフォルトのセル編集テンプレートの詳細については、編集トピックを参照してください。

    セルに適用されるカスタム テンプレートを提供する場合は、そのテンプレートをセル自体またはそのヘッダーに渡すことができます。まず、通常どおりに列を作成します。

    <igc-column
    field="Category"
    data-type="string"
    editable="true"
    id="column1">
</igc-column>
html

    そして、テンプレートを index.ts ファイルのこの列に渡します。

    
constructor() {
    var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    var column1 = document.getElementById('column1') as IgcColumnComponent;

    treeGrid.data = this.webGridCellEditSampleRoleplay;
    column1.inlineEditorTemplate = this.webGridCellEditCellTemplate;
    column2.inlineEditorTemplate = this.webGridCellEditCellTemplate;
    column3.inlineEditorTemplate = this.webGridCellEditCellTemplate;
}

public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => {
    let cellValues: any = [];
    let uniqueValues: any = [];
    for(const i of (this.webGridCellEditSampleRoleplay as any)){
        const field: string = ctx.cell.column.field;
        if(uniqueValues.indexOf(i[field]) === -1 )
        {
            cellValues.push(html`<igc-select-item value=${i[field]}>${(i[field])}</igc-select-item>`);
            uniqueValues.push(i[field]);
        }
    }
    return html`
    <igc-select style="width:100%; height:100%" size="large" @igcChange=${(e: any) => ctx.cell.editValue = e.detail.value}>
            ${cellValues}
    </igc-select>
    `;
}
ts

    上記のサンプルは、こちらで参照できます。

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA Banner

    CRUD 操作

    CRUD 操作を実行した場合、filtering、sorting、grouping などのパイプが再適用されるため、ビューが自動的に更新されることに注意してください。

    IgcTreeGridComponent は基本的な CRUD 操作のための簡易な API を提供します。

    新しいレコードの追加

    IgcTreeGridComponent コンポーネントは、提供したデータをデータ ソースに追加する addRow メソッドを公開します。

    public addNewChildRow() {
    // Adding a new record
    // Assuming we have a `getNewRecord` method returning the new row data
    // And specifying the parentRowID.
    const record = this.getNewRecord();
    this.treeGrid.addRow(record, 1);
}
typescript

    データを Tree Grid で更新

    Tree Grid のデータ更新は、グリッドで PrimaryKey が定義されている場合のみ updateRow と updateCell メソッドで行うことができます。セルと行の値またはそのいずれかを各 update メソッドで直接更新できます。

    // Updating the whole row
this.treeGrid.updateRow(newData, this.selectedCell.cellID.rowID);

// Just a particular cell through the Tree Grid API
this.treeGrid.updateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);

// Directly using the cell `update` method
this.selectedCell.update(newData);

// Directly using the row `update` method
const row = this.treeGrid.getRowByKey(rowID);
row.update(newData);
typescript

    Tree Grid からデータを削除

    deleteRow メソッドは、primaryKey が定義されている場合に指定した行のみを削除することに注意してください。

    // Delete row through Tree Grid API
this.treeGrid.deleteRow(this.selectedCell.cellID.rowID);
// Delete row through row object
const row = this.treeGrid.getRowByIndex(rowIndex);
row.delete();
typescript

    編集イベントでのセル検証

    IgcTreeGridComponent の編集イベントを使用して、ユーザーが IgcTreeGridComponent を操作する方法を変更できます。

    この例では、CellEdit イベントにバインドすることにより、入力されたデータに基づいてセルを検証します。セルの新しい値が事前定義された基準を満たしていない場合、イベントをキャンセルすることでデータソースに到達しないようにします。

    最初に必要なことは、グリッドのイベントにバインドすることです。

    constructor() {
    var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    this.webTreeGridCellEdit = this.webTreeGridCellEdit.bind(this);
    treeGrid.addEventListener("cellEdit", this.webTreeGridCellEdit);
}
typescript

    CellEdit は、セルの値がコミットされる直前に発生します。CellEdit の定義では、アクションを実行する前に特定の列を確認する必要があります。

    public webTreeGridCellEdit(event: CustomEvent<IgcGridEditEventArgs>): void {
    const column = event.detail.column;
    		
    if (column.field === 'Age') {
        if (event.detail.newValue < 18) {
            event.detail.cancel = true;
            alert('Employees must be at least 18 years old!');
        }
    } else if (column.field === 'HireDate') {
        if (event.detail.newValue > new Date().getTime()) {
            event.detail.cancel = true;
            alert('The employee hire date must be in the past!');
        }
    }
}

typescript

    Age (年齢) 列の下のセルに入力された値が 18 未満である場合、または HireDate (雇用日) 列の値が将来の場合、編集はキャンセルされ、ユーザーにキャンセルについての警告が表示されます。

    以下は、上記の検証が IgcTreeGridComponent に適用された結果のデモです。

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    スタイル設定

    事前定義されたテーマに加えて、利用可能な CSS プロパティを設定することでグリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

    <igc-tree-grid class="treeGrid"></igc-tree-grid>
html

    次に、そのクラスに関連する CSS プロパティを設定します。

    .treeGrid {
    --ig-grid-edit-mode-color: orange;
    --ig-grid-cell-editing-background: lightblue;
}
css

    スタイル設定の例

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    API リファレンス

    その他のリソース