Programmatically showing/hiding multiple detail grids behaves inconsistently

Programmatically showing/hiding multiple detail grids behaves inconsistently

Posted by: ken on 15 April 2019, 10:14 am EST

• 

  ken

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 April 2019, 10:14 am EST

  I’ve made a minimal project that demonstrates the problem:

  Component

  
  export class AppComponent {
    data = [
      {
        name: "First",
        showDetail: false,
        details: [
          {name: "Detail1"},
          {name: "Detail2"},
          {name: "Detail3"}
        ]
      },
      {
        name: "Second",
        showDetail: false,
        details: [
          {name: "Detail1"},
          {name: "Detail2"},
          {name: "Detail3"}
        ]
      },
      {
        name: "Third",
        showDetail: false,
        details: [
          {name: "Detail1"},
          {name: "Detail2"},
          {name: "Detail3"}
        ]
      }
    ]
  
    detailTypeChanged (item, grid) {
      const row = this.data.findIndex(e => e.name === item.name)
      console.log(row)
      item.showDetail ? grid.showDetail(row) : grid.hideDetail(row)
    }
  }
  
  

  HTML

  
  <wj-flex-grid [itemsSource]="data">
    <wj-flex-grid-column header="Name" binding="name"></wj-flex-grid-column>
    <wj-flex-grid-column header="Show Detail">
        <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
            <select [(ngModel)]="cell.item.showDetail" (ngModelChange)="detailTypeChanged(cell.item, detailGrid)">
                <option [ngValue]="false">Hide</option>
                <option [ngValue]="true">Show</option>
            </select>
        </ng-template>
    </wj-flex-grid-column>
    <ng-template #detailGrid="wjFlexGridDetail" wjFlexGridDetail detailVisibilityMode="Code" let-item="item">
        <wj-flex-grid [itemsSource]="item.details">
            <wj-flex-grid-column header="Detail" binding="name"></wj-flex-grid-column>
        </wj-flex-grid>
    </ng-template>
  </wj-flex-grid>
  
  

  What this is supposed to do is open or close the detail grid for each row based on the value of the select control. However, it behaves differently depending on which order and how many times I toggle each row.

  NOTE: if you’re testing these, reload the app before each one because it acts differently if the row has already been toggled before.

  For example:

  1. Show row 1: row 1 gets shown
  2. Show row 2: nothing happens
  3. Hide row 2: row 1 gets hidden, but the select on row 1 still says “Show”
  4. Show row 2: now row 2 gets shown

  If you do them backwards though, showing them seems to work fine:

  Again, make sure to reload the app first.

  1. Show row 2: row 2 gets shown
  2. Show row 1: row 1 gets shown
     
     But then:
  3. Show row 3: nothing happens
  4. Hide row 3: row 2 gets hidden

  All three in reverse works fine at first:

  1. Show row 3: row 3 gets shown
  2. Show row 2: row 2 gets shown
  3. Show row 1: row 1 gets shown
     
     Until you start hiding them:
  4. Hide row 3: row 2 gets hidden

  The log in detailTypeChanged always shows the correct row number, so I can’t figure out why it sometimes changes the wrong one. What’s happening here?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 15 April 2019, 8:26 pm EST

  Hi,

  This behaviour is observed because when a row detail is shown, another row is created in the main flex grid. Therefore, the findIndex methods return the wrong index of the row.

  To overcome this issue, search the main grid for the index instead of searching in the data source. Please refer to the following updated sample and let us know if you face any issues:

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

  ~Sharad