Log in to start a topic

Flex Grid Detail Row Height

Posted by: bryan2 on 14 September 2017, 12:05 pm EST

  • bryan2

    • Post Options:
    • Link
      Copy

    Posted 14 September 2017, 12:05 pm EST

    Hello,

    We are currently evaluating grid options in Angular 2. One required feature is a custom expandable detail view (master grid with child grids). We have implemented it successfully using the wj-flex-grid component and wjFlexGridDetail directive, however, there is one odd quirk in the behavior that we cannot figure out. When a detail row is expanded, it seems to pick and set a height that is relative to the number of child items, but never actually shows all of the child items. We would like for the detail row to always expand to the full height of the child grid and show all children, rather than requiring scrolling in the child grid.

    Here is our code with column definitions omitted for brevity:

                    <wj-flex-grid [itemsSource]="masterList" [selectionMode]="'Row'" [style.height]="'100%'" [headersVisibility]="'Column'" #wjGrid>
                    <ng-template wjFlexGridDetail #dp="wjFlexGridDetail" [detailVisibilityMode]="'Code'" let-item="item">
                        <wj-flex-grid [itemsSource]="item.children" [headersVisibility]="'Column'" [selectionMode]="'Row'" >
                            <!-- child grid column definitions -->
                        </wj-flex-grid>
                    </ng-template>

                     <!-- including this column def as it relates to the child grid appearance -->
                     <wj-flex-grid-column [header]="" [binding]="" [width]="60" [isReadOnly]="true">
                        <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
                            <div *ngIf="dp?.isDetailAvailable(row)">
                                <div
                                    [ngClass]="dp.isDetailVisible(row) ? 'collapse' : 'expand'" 
                                    (click)="dp.isDetailVisible(row) ? dp.hideDetail(row) : dp.showDetail(row, true)">
                                </div>
                            </div>
                        </ng-template>
                    </wj-flex-grid-column>

                   <!-- master grid column definitions -->

                </wj-flex-grid>

  • bryan2

    Posted 14 September 2017, 12:05 pm EST

    Adding a little more: setting [maxHeight] had no impact.

  • manish-gupta1

    Posted 14 September 2017, 12:05 pm EST

    Hello,

    We are working on your query and we will share relevant information soon.

    Thanks,

    Manish Kumar Gupta

  • bryan2

    Posted 14 September 2017, 12:05 pm EST

    Thank you. I have tried running parentGrid.autoSizeRow(rowNum) after an item is expanded, but it has not worked.

  • manish-gupta1

    Posted 14 September 2017, 12:05 pm EST

    Hello,

    We are sorry, we are unable to replicate the issue at our end with 5.20171.293.

    For your reference, please see the attached sample that implements the same.

    If the issue persists, please modify the attached sample depicting your issue so that we can debug and assist you accordingly.

    Thanks,

    Manish Kumar Gupta

    2017/06/FlexGrid_rowDetail_autoHeight.zip

  • bryan2

    Posted 14 September 2017, 12:05 pm EST

    I appreciate the help with this. It turns out the column definitions I omitted were important after all! I have recreated the issue by editing child-component.html to include a column with a custom template that uses multiple lines. Apparently this causes the detail provider to be unable to determine the correct height to set the detail panel to.

    I have confirmed that removing the custom template columns from the child grid in my application does solve the height issue, however we do have a requirement for custom cell templates in the child grid.

    I have attached the edited child-component.html , with the small change highlighted with a comment. This is the only file I made any changes to, so replace your version with this one and it should recreate the error.

  • bryan2

    Posted 14 September 2017, 12:05 pm EST

    Re attaching file in a zipped folder

    2017/06/child.component.zip

  • bryan2

    Posted 14 September 2017, 12:05 pm EST

    Adding on, I have determined that it is not only multi line cell templates. It is any cell template that has an effect on the row’s height.

  • bryan2

    Posted 14 September 2017, 12:05 pm EST

    The only thing that has worked so far out of MANY attempted solutions is to wrap a grid.autoSizeRow() in a 1/2 second timeout block. This is clearly not ideal. Any solution would be appreciated.

  • manish-gupta1

    Posted 14 September 2017, 12:05 pm EST

    Hello Bryan,

    Thank you for providing the additional information.

    The behavior is by design, any cell template compares its height to the default row height (grid.rows.defaultSize), and increase the latter if necessary to fit template’s content.

    Hence, it takes some time for autoSizing the rows for child FlexGrid while in the meantime parent FlexGrid’s row resizes itself according to current calculated height for child FlexGrid.

    To overcome this issue, either resize parent FlexGrid inside setTimeout() with half second or set [autoSizeRows]=“false” on the wjFlexGridCellTemplate element same as following code snippet in child.component.html:

    <wj-flex-grid [itemsSource]="data" [headersVisibility]="'Column'" [selectionMode]="'Row'">
    <wj-flex-grid-column [header]="'id'" [binding]="'id'" [isReadOnly]="true">       
    </wj-flex-grid-column>
    <wj-flex-grid-column [header]="'Country'" [binding]="'country'" [width]="'*'">
    </wj-flex-grid-column>

    <!-- Added This column with a multi line template -->
    <wj-flex-grid-column [header]="'Extra Column'" [binding]="" [width]="'*'">
    	<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item" [autoSizeRows]="false">
            <div>Multi Line</div>
            <div>Nested Template</div>
        </ng-template>
    </wj-flex-grid-column>

    <wj-flex-grid-column [header]="'Sales'" [binding]="'sales'"></wj-flex-grid-column>
    <wj-flex-grid-column [header]="'Download'" [binding]="'downloads'"></wj-flex-grid-column>
</wj-flex-grid>

    Thanks,

    Manish Kumar Gupta

  • bryan2

    Posted 14 September 2017, 12:05 pm EST

    Understood.

    The timeout solution isn’t acceptable for our production environment as it creates a sort of jerk effect after expanding a row.

    Setting [autoSizeRows]=“false” also isn’t acceptable as it causes the content in the rows to be obscured.

    We generally know the height of the rows ahead of time though. Can we configure the child grid to have a larger default height so the detailProvider knows to create a taller detail pane?

  • bryan2

    Posted 14 September 2017, 12:05 pm EST

    setting the defaultSize of the rows to a larger height got the job done! Thank you.

  • bakbarzadeh

    Posted 7 June 2018, 12:24 pm EST

    Hi,

    I ran into a similar issue. I have a flex grid which has row details. The detail component uses *ngIf to display “loading…” message while data is loading.

    The problem rises when the data is loaded and the height of the detail component needs to be updated to fit new content. I couldn’t resolve this problem using any of the suggested solutions.

    
        <wj-flex-grid headersVisibility="Column" selectionMode="Row" [itemsSource]="items$ | async" [itemFormatter]="itemFormatter">

... other columns
            <ng-template wjFlexGridDetail #dp="wjFlexGridDetail" [maxHeight]="250" detailVisibilityMode="Code" let-item="item">
                <ngx-detail [item]="item"></ngx-detail>
            </ng-template>
        </wj-flex-grid>

    And here is part of detail component:

    
  <div *ngIf="loading$ | async">
    <span>Loading ...</span>
  </div>

  <div *ngIf="!(loading$ | async)" class="container">
    <div class="row">
        <span>{{ (item$ | async)?.property }}</span>	
    </div>
  </div>

    Thanks for your time in advance,

    Babak

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.