Posted 1 July 2020, 11:00 am EST - Updated 3 October 2022, 4:02 pm EST
We recently upgraded Wijmo Grid to Angular 9 and have a issue.
We are showing Before and After Data on the Wijmo Grid
When I click the first “+” icon , it does not expand to show the data.
When I click the second “+” icon, it shows the first “+” icon data.
When I click the third “+” icon, it shows the second “+” icon data.
This issue did not show up in Angular 7
I am using “@grapecity/wijmo.all”: “^5.20193.0”,
“wijmo”: “^5.20193.0”,
initGrid(grid: wjcGrid.FlexGrid) {
const self = this;
// tslint:disable-next-line:no-unused-expression
this.detail = new wjcGridDetail.FlexGridDetailProvider(grid, {
detailVisibilityMode: wjcGridDetail.DetailVisibilityMode.ExpandMulti,
createDetailCell: function(row) {
const AuditLogId = row.dataItem.AuditLogId;
console.log(AuditLogId);
// filtering is done here because the api returns all the data
self.auditLogDetailsDataCollectionView = new wjcCore.CollectionView(
[],
{
filter: function(item) {
console.log('filtering');
return item.AuditLogId === AuditLogId;
}
}
);
// self.LogDetails$ = self.auditService.getAuditLogDetails(AuditLogId);
self.store.dispatch(new fromStore.LoadAuditLogDetails(AuditLogId));
self.LogDetails$ = self.store.select(fromStore.getAuditLogDetail);
self.LogDetails$.subscribe(data => {
console.log(data);
self.auditLogDetailsDataCollectionView.sourceCollection = data;
});
console.log('before source changes');
// First div is to show the user that data is loading
// Second is to create the grid
const cell = wjcCore.createElement(`<div>
<div>Loading...</div>
<div style="display: none"></div>
</div>`);
const gridChild = new wjcGrid.FlexGrid(cell.children[1], {
columns: [
{ header: 'Property Name', binding: 'PropertyName', width: '*' },
{
header: 'Before Edit',
binding: 'OriginalValue',
width: '4*',
wordWrap: true,
multiLine: true
},
{
header: 'After Edit',
binding: 'NewValue',
width: '4*',
wordWrap: true,
multiLine: true
}
],
headersVisibility: wjcGrid.HeadersVisibility.Column,
isReadOnly: true,
autoGenerateColumns: false,
allowResizing: 'Both'
});
self.auditLogDetailsDataCollectionView.sourceCollectionChanged.addHandler(
function() {
const c0 = cell.children[0] as HTMLDivElement;
c0.style.display = 'none';
if (
gridChild instanceof wjcGrid.FlexGrid &&
gridChild.hostElement
) {
gridChild.itemsSource = self.auditLogDetailsDataCollectionView;
gridChild.hostElement.style.display = 'block';
grid.autoSizeRows(0, grid.rows.length - 1, false, 0);
gridChild.invalidate();
gridChild.autoSizeRows(0, gridChild.rows.length - 1, false, 0);
setTimeout(() => {
grid.autoSizeRows(0, grid.rows.length - 1, false, 0);
}, 15);
}
}
);
return cell;
},
rowHasDetail: function(row) {
return (
row.dataItem.Action === 'Update' &&
row.dataItem.TypeFullName !== 'Governor Vote' &&
row.dataItem.AuditLogDetails.length > 0
);
}
});
grid.rows.defaultSize = 34;
grid.columnHeaders.rows.defaultSize = 34;
}
