Ag grid Align Master Detail grid columns

I am following the Ag-Grid master detail docs, and trying to get both the master and detail grid columns to align and stay in sync as mentioned in the aligned grid docs. But it appears not to work with master detail layout.

I went debugging Ag-grid alignedGridService and found that the passed grid config is supposed to have a grid API reference which is used to bind grid events across both grids,

// 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);
        }
    });
}

which is not the case for detail grids as they don't have API references when above code gets executed, I guess probably because detail grid is instantiated only when required and secondly its config would be reused for each detail grid so their API objects are not part of the config, instead part of the master config, as per the docs the detail API ref can be accessed using,

// 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();
});

and on the other side here is what I am trying to do following the aligned grids docs,

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

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

which obviously seems wrong in this case, I guess I might need to put in place custom implementation to bind both grid events together but I not sure where to start or even if that is possible,

Secondly, it appears that setting autoHeight: true appears to have no impact on the height of the detail grid, basically what I am trying to do is loose the detail grid's scroll bars, because its not supposed to have a great deal of rows. According to the docs you can either provide static height or provide height at run time, but there appears no option to auto determine the height,

// 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;
    }
}

In my case there can be longer length of texts in the cells, and I want rows to auto wrap and have variable heights instead of restricting them to certain height, due to the reason I have been using autoHeight but that also appears to have no impact here.

here is a stackBlitz which demonstrates both issues, one may say that Master/Detail layout is not probably appropriate for the use case here, and instead a simply tree layout might be good, but provided the fact that detail grids can have their own headers and provide things not possible with the tree view, I am inclined towards using the master/detail view.

Any help which could shoot me in the direction to fix both of these issues is highly appreciated.

EDIT: I got the aligned grids to partially work by using:

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);
    });
}

NOTE: Due to grid's virtual scroll had to update masterGridOption.alignedGrids on each detail onGridReady callback, because even expanded detail grids are destroyed and re generated.

Now apart from making both detail and master grid rows truly follow autoHeight only thing I would like is to also align non common columns between master and detail, e.g.

resizing master's name column should resize detail's first name or last name column so they remain in sync and vice verca
Hiding master's name column should hide both details f name and l name columns
Also due to these two sub columns (f name and l name) corresponding to master 'name' column, reordering seems to be broken,

Recommended topics

Hot tags