Master-Detail for Multirow Grid

Master-Detail for Multirow Grid

Posted by: mgorelov on 28 March 2020, 7:22 am EST

• 

  mgorelov

  • Post Options:
  • Link
    Copy

  Posted 28 March 2020, 7:22 am EST

  Hello,
  
  I’m trying to utilize Master-Detail with Multirow Grid for Angular application, but it doesn’t seem to work. The grid displays fine, but detail row doesn’t expand.

  Here is my code:

  
  <wj-multi-row [itemsSource]="tasks" [autoGenerateColumns]="false" [layoutDefinition]="tasksLayout">
      <ng-template wjFlexGridDetail [maxHeight]="250" let-item="item">
          <wj-flex-grid [itemsSource]="item.tasks" [isReadOnly]="true" [headersVisibility]="'Column'"></wj-flex-grid>
      </ng-template>
  </wj-multi-row>
  
  

  Can somebody point me what I’m doing wrong? Or this is not supported at the moment?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 29 March 2020, 8:31 pm EST

  Hi,

  The FlexGridDetailProvider is not supported with MultiRow directly. But, you can customize the MultiRow and add some event listeners to add the support of details.

  First, set the detailVisibilityMode of wjFlexGridDetail to Code so that the plus and minus icons are hidden:

  <ng-template
      detailVisibilityMode="Code"
      #detail="wjFlexGridDetail"
      wjFlexGridDetail
      let-item="item"
    >
      {{item.product | json}}
    </ng-template>
  

  Then, handle the formatItem event of Multirow and add the icons manually:

  onFormat(s: wjcGridMultiRow.MultiRow, e) {
      if (s.rowHeaders === e.panel) {
        var lastBindRow = e.row + (e.row % s.rowsPerItem) - 1;
        if (lastBindRow === e.row) {
          if (this.detail.isDetailVisible(e.row)) {
            e.cell.innerHTML =
              '<span class="wj-glyph-minus wj-detail-glyph"></span>';
          } else {
            e.cell.innerHTML =
              '<span class="wj-glyph-plus wj-detail-glyph"></span>';
          }
        }
      }
    }
  

  And then handle the mousedown event and hide/show the details as per the event data:

  multirow.rowHeaders.hostElement.addEventListener(
        "mousedown",
        e => {
          if (wjcCore.hasClass(e.target as HTMLElement, "wj-detail-glyph")) {
            var hti = multirow.hitTest(e);
            if (this.detail.isDetailVisible(hti.row)) {
              this.detail.hideDetail(hti.row);
            } else {
              this.detail.hideDetail();
              this.detail.showDetail(hti.row);
            }
          }
        },
        true
      );
  

  Please refer to the sample link below for reference:

  https://codesandbox.io/s/angular-5xwtr

  Regards,
  
  Ashwin