2

私はAg-Grid マスター詳細ドキュメントに従っており、整列グリッドドキュメントに記載されているように、マスター グリッド列と詳細グリッド列の両方を整列させ、同期を維持しようとしています。ただし、マスター詳細レイアウトでは機能しないようです。

Ag-grid のデバッグに行ったところ、渡されたグリッド構成には、両方のグリッド間でグリッド イベントをバインドするために使用されるグリッド API 参照alignedGridServiceが含まれているはずであることがわかりました。

// iterate through the aligned grids, and pass each aligned grid service to the callback
const otherGrids = this.gridOptionsWrapper.getAlignedGrids();
if (otherGrids) {
    otherGrids.forEach((otherGridOptions: GridOptions) => {
        if (otherGridOptions.api) {
            const alignedGridService = otherGridOptions.api.__getAlignedGridService();
            callback(alignedGridService);
        }
    });
}

上記のコードが実行されたときにAPI参照がないため、詳細グリッドには当てはまりません。おそらく、詳細グリッドは必要な場合にのみインスタンス化され、次にその構成が詳細グリッドごとに再利用されるため、APIオブジェクトはそうではありませんマスター構成の一部ではなく、構成の一部であり、ドキュメントに従って、詳細な API ref にアクセスするには、

// lookup a specific DetailGridInfo by id, and then call stopEditing() on it
var detailGridInfo = masterGridOptions.api.getDetailGridInfo('someDetailGridId');
detailGridInfo.api.stopEditing();

// iterate over all DetailGridInfo's, and call stopEditing() on each one
masterGridOptions.api.forEachDetailGridInfo(function(detailGridInfo) {
    console.log("detailGridInfo: ", detailGridInfo);
    // then e.g. call stopEditing() on that detail grid
    detailGridInfo.api.stopEditing();
});

反対側では、整列されたグリッドのドキュメントに従って私がやろうとしていることです。

/** HIDE SCROLL FOR DETAIL GRID **/
// detailConfig.suppressHorizoHntalScroll = true;

/** SET DETAIL GRID AS THE ALIGNED GRID */
this.masterGridOptions.alignedGrids = [this.detailGridOptions];

この場合は明らかに間違っているようです。両方のグリッド イベントをバインドするカスタム実装を配置する必要があるかもしれませんが、どこから始めればよいか、またはそれが可能かどうかさえわかりません。

第二に、設定autoHeight: trueは詳細グリッドの高さに影響を与えないように見えます.基本的に私がやろうとしているのは、詳細グリッドのスクロールバーを緩めることです. ドキュメントによると、静的な高さを提供するか、実行時に高さを提供できますが、高さを自動決定するオプションはないようです。

// option 1 - fixed detail row height, sets height for all details rows
masterGridOptions.detailRowHeight = 500;

// option 2 - dynamic detail row height, dynamically sets height for all rows
masterGridOptions.getRowHeight = function (params) {
    var isDetailRow = params.node.detail;
    if (isDetailRow) {
        var detailPanelHeight = params.data.children.length * 50;
        // dynamically calculate detail row height
        return detailPanelHeight;
    } else {
        // for all non-detail rows, return 25, the default row height
        return 25;
    }
}

私の場合、セル内のテキストの長さが長くなる可能性があり、使用してきた理由により、行を特定の高さに制限するのではなく、行を自動折り返しして高さを可変にしたいのですautoHeightが、それもここでは影響がないようです.

これは、両方の問題を示すstackBlitzです。ここでのユース ケースには、マスター/詳細レイアウトはおそらく適切ではなく、代わりに単純なツリー レイアウトが適切であると言う人もいるかもしれませんが、詳細グリッドが独自のヘッダーとツリービューでは不可能なことを提供するため、マスター/詳細ビューを使用する傾向があります。

これらの問題の両方を修正する方向に私を撃つことができるどんな助けも高く評価されています.

編集:次を使用して、整列したグリッドを部分的に機能させました。

detailGridOptions.alignedGrids = [masterGridOptions];
detailGridOptions.onGridReady = (params) => {
    /** SET DETAIL GRID AS THE ALIGNED GRID */
    masterGridOptions.api.alignedGrids = [];
    masterGridOptions.api.forEachDetailGridInfo((params: DetailGridInfo, index) => {
        masterGridOptions.api.alignedGrids.push(params);
    });
}

注:拡張された詳細グリッドでさえ破棄され、再生成されるため、グリッドの仮想スクロールによりmasterGridOption.alignedGrids、各詳細コールバックで更新する必要がありました。onGridReady

詳細とマスター グリッドの行の両方を真に autoHeight に従うようにすることとは別に、私が望むのは、マスターと詳細の間で非共通の列を揃えることです。

  • マスターの名前列のサイズを変更すると、詳細の名または姓の列のサイズが変更され、同期が維持されます。
  • マスターの名前列を非表示にすると、名前列と名前列の両方の詳細が非表示になります
  • また、マスターの「名前」列に対応するこの 2 つのサブ列 (f 名と l 名) により、並べ替えが壊れているように見えますが、
4

0 に答える 0