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

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

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

• 

  soumya.mangaraj

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 1 April 2020, 10: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 ?

• 

  soumya.mangaraj

  • Post Options:
  • Link
    Copy

  Posted 1 April 2020, 3:17 pm EST - Updated 3 October 2022, 1:52 pm EST

  

  2880×1800 590 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 April 2020, 6:30 am 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

• 

  soumya.mangaraj

  • Post Options:
  • Link
    Copy

  Posted 4 April 2020, 8:14 am 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) ?

• 

  soumya.mangaraj

  • Post Options:
  • Link
    Copy

  Posted 4 April 2020, 8:17 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)”
  
  >
  
  
  
  
  
  <a
  
  [class.grid-link-selected]=“isCellSelected(cell)”
  
  [ngStyle]=“{
  
  display:
  
  !dp?.isDetailVisible(row) || item.ISCHILDCHECK == 1
  
  ? ‘’
  
  : ‘none’
  
  }”
  
  (click)=“dp.showDetail(row, true)”
  
  (click)=“showChildProcesses(item)”
  
  >
  
  
  
  
  
  
  
  
  
  
  
  <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”] }}
  
  
  
  
  
  
  
  
  
  
  
  
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 6 April 2020, 1:17 am 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

• 

  soumya.mangaraj

  • Post Options:
  • Link
    Copy

  Posted 6 April 2020, 5:05 am 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.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 7 April 2020, 1:06 am 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

• 

  shaileshn011

  • Post Options:
  • Link
    Copy

  Posted 25 May 2021, 12:19 pm EST

  HI Ashiwin,

  Can you provide Inline Add, Edit and Delete functionality in master and detail flex grid with stackblitz working solution?

  ~regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 May 2021, 11:11 pm EST

  Hi Shailesh,

  Can you let me know whether your requirement is to add inline editing in the main grid only or the main and detail grid both?

  ~regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 May 2021, 2:12 am EST

  Hi,

  We have created a sample for the in-line feature for edit and delete the main grid, however for add button can you please share more details. As per our understanding, you want to add rows on click of add button, so we have added an additional button outside the grid to add rows.

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

  ~regards