How to implement expand and collapse feature for child and parent row FLexGrid

Posted by: soumya.mangaraj on 1 April 2020, 1:59 am EST

  • Posted 1 April 2020, 1:59 am EST

    <wj-flex-grid
    #flexio
    [style.height]="'100%'"
    class="outer-wijmo-flex-grid"
    [headersVisibility]="'Column'"
    [(itemsSource)]="filteredProcesses"
    [isReadOnly]="true"
    [stickyHeaders]="false"
    [autoGenerateColumns]="false"
    (initialized)="initProcessesGrid(flexio)"
    (itemsSourceChanged)="itemsSourceChangedHandler()"
    >
    <wj-flex-grid-column
    [isReadOnly]="false"
    header=""
    binding=""
    [width]="30"
    >
    <ng-template
    wjFlexGridCellTemplate
    [cellType]="'Cell'"
    let-row="row"
    let-item="item"
    let-cell="cell"
    >
    <div *ngIf="item.HASCHILD">
    <a
    [class.grid-link-selected]="isCellSelected(cell)"
    [ngStyle]="{ display: dp.isDetailVisible(row) ? '' : 'none' }"
    (click)="dp.hideDetail(row)"
    (click)="removeChildProcesses(item)"
    >
    <adp-icon iconType="fa-minus"></adp-icon>
    </a>
    <a
    [class.grid-link-selected]="isCellSelected(cell)"
    [ngStyle]="{
    display:
    !dp?.isDetailVisible(row) || item.ISCHILDCHECK == 1
    ? ''
    : 'none'
    }"
    (click)="dp.showDetail(row, true)"
    (click)="showChildProcesses(item)"
    >
    <adp-icon iconType="fa-plus"></adp-icon>
    </a>
    </div>
    </ng-template>
    </wj-flex-grid-column>

    Please refer the screenshots and code which we are using to implement this feature ?
    Could anyone suggest demo for this ?
  • Replied 1 April 2020, 6:17 am EST

  • Replied 1 April 2020, 9:30 pm EST

    Hi Soumya,

    Using FlexGridDetail provider automatically add icons to the row headers of the grid to expand/collapse the row details.
    Can you let us know whether you wish to customize the icons or your requirements are different?

    Regards,
    Ashwin
  • Replied 3 April 2020, 11:14 pm EST

    Hi Ashwin

    I have implemented the same using FlexgridDetail.
    But, I am facing certain issues while implementing FlexgridDetail.
    Could you share some demo in stackblitz (Related to my code which is there on the top) ?
  • Replied 3 April 2020, 11:17 pm EST

    <wj-flex-grid
    #flexio
    [style.height]="'100%'"
    class="outer-wijmo-flex-grid"
    [headersVisibility]="'Column'"
    [(itemsSource)]="filteredProcesses"
    [isReadOnly]="true"
    [stickyHeaders]="false"
    [autoGenerateColumns]="false"
    (initialized)="initProcessesGrid(flexio)"
    (itemsSourceChanged)="itemsSourceChangedHandler()"
    >
    <wj-flex-grid-column
    [isReadOnly]="false"
    header=""
    binding=""
    [width]="30"
    >
    <ng-template
    wjFlexGridCellTemplate
    [cellType]="'Cell'"
    let-row="row"
    let-item="item"
    let-cell="cell"
    >
    <div *ngIf="item.HASCHILD">
    <a
    [class.grid-link-selected]="isCellSelected(cell)"
    [ngStyle]="{ display: dp.isDetailVisible(row) ? '' : 'none' }"
    (click)="dp.hideDetail(row)"
    (click)="removeChildProcesses(item)"
    >
    <adp-icon iconType="fa-minus"></adp-icon>
    </a>
    <a
    [class.grid-link-selected]="isCellSelected(cell)"
    [ngStyle]="{
    display:
    !dp?.isDetailVisible(row) || item.ISCHILDCHECK == 1
    ? ''
    : 'none'
    }"
    (click)="dp.showDetail(row, true)"
    (click)="showChildProcesses(item)"
    >
    <adp-icon iconType="fa-plus"></adp-icon>
    </a>
    </div>
    </ng-template>
    </wj-flex-grid-column>
    <wj-flex-grid-detail [detailVisibilityMode]="'ExpandSingle'">
    <ng-template
    #dp="wjFlexGridDetail"
    wjFlexGridDetail
    let-row="row"
    let-item="item"
    >
    <wj-flex-grid
    #innerFlex
    [headersVisibility]="'Column'"
    [(itemsSource)]="childProcesses"
    [isReadOnly]="true"
    [autoGenerateColumns]="false"
    (initialized)="initChildProcessesGrid(innerFlex)"
    (itemsSourceChanged)="itemsSourceChangedHandler()"
    >
    <wj-flex-grid-column
    header="PROCESS NAME"
    binding="PROCESS NAME"
    [width]="'*'"
    >
    <ng-template
    wjFlexGridCellTemplate
    [cellType]="'Cell'"
    let-item="item"
    let-cell="cell"
    >
    <a (click)="processClick(item)"
    >{{ item["PROCESS NAME"] }}
    </a>
    </ng-template>
    </wj-flex-grid-column>
    </wj-flex-grid>
    </ng-template>
    </wj-flex-grid-detail>
    </wj-flex-grid>
  • Replied 5 April 2020, 4:17 pm EST

    Hi Soumya,

    You may use the wjFlexGridDetail directive to directly add the details in the HTML template. Please refer to the sample link below:

    https://www.grapecity.com/wijmo/demos/Grid/Master-Detail/NestedGrids(RowDetail)/angular


    ~regards
  • Replied 5 April 2020, 8:05 pm EST

    HI Ashiwin

    ODataCollectionView is something which we can't implement with our itemSource since we are not converting array of objects into ODataCollectionView.We are not at all using ODataCollectionView. We are simply referring to array of objects.

    Could you suggest some idea how to implement this feature by using custom elements to show or hide ?https://demos.wijmo.com/5/angular/rowdetails/rowdetails/

    I just need a stackblitz working solution of the above context.
  • Replied 6 April 2020, 4:06 pm EST

    Hi Soumya,

    Refer to the sample link below that uses custom icons to show/hide the details:

    https://stackblitz.com/edit/angular-efauth

    Also, in the previous demo, the ODataCollectionView class is just used as an example. The same process can be followed even if you are using a CollectionView.

    ~regards
Need extra support?

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

Learn More

Forum Channels