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:
- Show row 1: row 1 gets shown
- Show row 2: nothing happens
- Hide row 2: row 1 gets hidden, but the select on row 1 still says “Show”
- 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.
- Show row 2: row 2 gets shown
- Show row 1: row 1 gets shown
But then: - Show row 3: nothing happens
- Hide row 3: row 2 gets hidden
All three in reverse works fine at first:
- Show row 3: row 3 gets shown
- Show row 2: row 2 gets shown
- Show row 1: row 1 gets shown
Until you start hiding them: - 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?