Alternative way to show details of a Wijmo flexgrid besides autoSizeRows()?

Question

I'm looking for a way to calculate the FlexGrid height of a child grid and use that height to resize the parent grid while displaying the contents of said child grid? I'm trying to avoid using autoSizeRows() to display all the cell contents of a grid. Here, I have a slightly modified way of opening a FlexGrid asynchronously:

function autoSizeRowsAsync(grid: wjcGrid.FlexGrid) {
  try {
    var vr = grid.viewRange;
    var gridHeight = vr.getRenderSize(grid.cells).height; //apply to parent element

    for (let r = vr.topRow; r <= vr.bottomRow; r++) {
      try {
        var _mergedrange = grid.getMergedRange(grid.cells, r, 0);

        if (_mergedrange != null) {
          grid.rows[r].height = grid.rows[r].renderHeight;

          //NOTE: this is the code I aim to replace with something faster
          grid.autoSizeRows(_mergedrange.topRow, _mergedrange.bottomRow);
          grid.refreshRange(_mergedrange);
        }
        else {
          grid.rows[r].height = grid.rows[r].renderHeight;

        }
      } catch { grid.autoSizeRows(r, r); }
    }

    //setTimeout(() => {
    //  grid.autoSizeColumns();
    //  grid.refreshCells(true);
    //}, 300);

  } catch { grid.autoSizeRows(0, 0); }
}

That TypeScript function gets called in the loadedRows() grid property on the html, here:

<!--Parent grid-->
<ng-template wjFlexGridDetail
#dp="wjFlexGridDetail"
let-item="item"
[detailVisibilityMode]="'ExpandMulti'">
    <wj-flex-grid #parentGrid
        [itemsSource]="item.data"
        (loadedRows)="loadedRows(parentGrid, gridMarkers, $event)"
        (initialized)="initializeGrid(parentGrid, $event, false, false, item.label,sdp)">
        <!-- Data and columns here  -->

        <!--Child grid-->
        <ng-template wjFlexGridDetail
        #sdp="wjFlexGridDetail"
        let-item="item"
        [detailVisibilityMode]="'ExpandMulti'"
        [width]="'*'">
            <wj-flex-grid #childGrid
                [itemsSource]="item.otherData"
                [headersVisibility]="item.anyNotFound ? 'Row' : 'None'"
                (loadedRows)="loadedRows(childGrid, gridScenarios, $event)"
                (initialized)="initializeGrid(childGrid, $event, true)">
            </wj-flex-grid>
       </ng-template>
    </wj-flex-grid>
</ng-template>

loadedRows() function that calls my modified autoSizeRowsAsync() function:

public loadedRows(grid: wjcGrid.FlexGrid, parentGrid: wjcGrid.FlexGrid, eve) {
    this.gridSelectionService.addGrid(grid);
    if (grid.columns.visibleLength > 1) {
      this.setAutoSizeColumnsDefault(grid);
    } if (parentGrid != null) {

      setTimeout(() => {
        parentGrid.onLoadedRows();
        autoSizeRowsAsync(parentGrid);
      }, 50);
    }
  }

Is there a way to disable autoSizeRows() and manually display the grid's cell contents based on calculating the grid of the height? Would this really help make any difference in performance when displaying the grid?

Alternative way to show details of a Wijmo flexgrid besides autoSizeRows()?

0 Answers0