[]
【重要】2024年1月公開のアップデート「未適用」のお客様へ デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Wijmo_Grid_Detail.Flexgriddetailprovider

FlexGridDetailProvider クラス

FlexGrid コントロールの詳細行を実装します。

詳細行をFlexGridコントロールに追加するには、FlexGridDetailProviderのインスタンスを作成し、{@linkcreateDetailCell}プロパティを詳細セルに表示される要素を作成する関数に設定します。

以下に例を示します。

import { FlexGrid } from '@grapecity/wijmo.grid';
import { FlexGridDetailProvider } from '@grapecity/wijmo.grid.detail';

// カテゴリを表示するFlexGridを作成します。
let gridCat = new FlexGrid('#gridCat', {
    itemsSource: getCategories();
});

// 各カテゴリの製品を示す詳細行を追加します
let detailProvider = new FlexGridDetailProvider(gridCat, {
    createDetailCell: (row) => {
        let cell = document.createElement('div');
        new FlexGrid(cell, {
            itemsSource: getProducts(row.dataItem.CategoryID)
        });
        return cell;
    }
});

FlexGridDetailProviderは、詳細行をいつ表示するかを決定するdetailVisibilityModeプロパティを提供します。

このプロパティのデフォルト値はExpandSingleです。これにより、行ヘッダーに折りたたみ/展開アイコンが追加されます。

次のデモでは、FlexGridDetailProviderを使用して、FlexGridの行にさまざまな種類の詳細を追加する方法を示しています。

デモ

階層

コンストラクタ

プロパティ

メソッド

コンストラクタ

constructor

プロパティ

createDetailCell

createDetailCell: ICreateDetailCell

詳細セルを作成するためのコールバック関数を取得または設定します。

このコールバック関数は、パラメータとしてRow を受け取り、 行詳細を表すHTML要素を返します。 次に例を示します。

// create detail cells for a given row
dp.createDetailCell = (row) => {
    let cell = document.createElement('div');
    new FlexGrid(cell, {
        itemsSource: getProducts(row.dataItem.CategoryID),
        headersVisibility: 'Column'
    });
    return cell;
};

detailVisibilityMode

detailVisibilityMode: DetailVisibilityMode

行詳細をいつ表示するかを決定する値を取得または設定します。

このプロパティのデフォルト値はDetailVisibilityMode.ExpandSingleです。

disposeDetailCell

disposeDetailCell: IDisposeDetailCell

詳細セルを破棄するためのコールバック関数を取得または設定します。

このコールバック関数は、パラメータとしてRow を受け取り、 詳細セルに関連付けられているすべてのリソースを破棄します。

この関数はオプションです。この関数は、自動的に ガベージコレクトされないリソースをcreateDetailCell 関数で 割り当てている場合に使用します。

grid

grid: FlexGrid

このFlexGridDetailProvider を所有するFlexGrid を取得します。

isAnimated

isAnimated: boolean

行詳細を表示するときにアニメーションを使用するかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はfalseです。

keyActionEnter

keyActionEnter: KeyAction

［ENTER］キーが押されたときに実行されるアクションを取得または設定します。

このプロパティのデフォルト設定はKeyAction.None です。 これにより、グリッドはキーを処理できます。 そしてKeyAction.ToggleDetail により、Enterキーを操作して詳細行の表示を切り替えます。

maxHeight

maxHeight: number | null

詳細行の最大高さをピクセル単位で取得または設定します。

このプロパティのデフォルト値はnull です。 この場合、詳細行の高さに上限はありません。

rowHasDetail

rowHasDetail: IRowHasDetail

行に詳細があるかどうかを判定するためのコールバック関数を取得または設定します。

このコールバック関数は、パラメータとしてRow を受け取り、 行に詳細があるかどうかを示すブール値を返します。次に例を示します。

// 奇数のCategoryIDを持つ項目から詳細を削除します
dp.rowHasDetail = (row) => {
    return row.dataItem.CategoryID % 2 == 0;
};

このプロパティをnullに設定すると、すべての通常のデータ行（グループ行または新しいアイテムテンプレートではない）に詳細が含まれます。

メソッド

getDetailRow

  • 指定したグリッド行に関連付けられた詳細行を取得します。

    引数

    • row: any

      調査する行または行のインデックス。

    戻り値 DetailRow | null

hideDetail

  • hideDetail(row?: Row | number): void

  • 指定された行の詳細行を非表示にします。

    引数

    • オプション row: Row | number

      詳細が非表示になっているRowまたは行のインデックス。このパラメータはオプションです。 指定されない場合は、すべての詳細行が非表示になります。

    戻り値 void

isDetailAvailable

  • isDetailAvailable(row: any): boolean

  • 行に表示する詳細があるかどうかを決定する値を取得します。

    引数

    • row: any

      調査する行または行のインデックス。

    戻り値 boolean

isDetailVisible

  • isDetailVisible(row: any): boolean

  • 行の詳細を表示するかどうかを決定する値を取得します。

    引数

    • row: any

      調査する行または行のインデックス。

    戻り値 boolean

showDetail

  • showDetail(row: Row | number, hideOthers?: boolean): void

  • 指定された行の詳細行を表示します。

    引数

    • row: Row | number

      詳細が表示されているRowまたは行のインデックス。

    • オプション hideOthers: boolean

      他のすべての行の詳細を非表示にするかどうか。

    戻り値 void