Posted 8 October 2019, 12:07 pm EST
I have a wijmo Grid in Angular . I want to add hyperlink to one of the columns. I want to add a hyperlink to the Description field.
Also I want to show hyperlink for some description rows and not all depending upon some condition.
Follow is my code.
initGrid(grid: wjcGrid.FlexGrid) {
const self = this;
grid.autoSizeRows(0, grid.rows.length - 1, false, 20);
// tslint:disable-next-line:no-unused-expression
new wjcGridDetail.FlexGridDetailProvider(grid, {
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, prop) {
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;
});
// 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: '*' },
{ header: 'After Edit', binding: 'NewValue', width: '*' }
],
headersVisibility: wjcGrid.HeadersVisibility.Column,
isReadOnly: true,
autoGenerateColumns: false
});
self.auditLogDetailsDataCollectionView.sourceCollectionChanged.addHandler(
function(s, e) {
const c0 = cell.children[0] as HTMLDivElement;
c0.style.display = 'none';
gridChild.itemsSource = self.auditLogDetailsDataCollectionView;
gridChild.hostElement.style.display = 'block';
grid.autoSizeRows(0, grid.rows.length - 1, false, 20);
gridChild.invalidate();
}
);
// console.log('K2', gridChild);
return cell;
},
rowHasDetail: function(row) {
return (
row.dataItem.Action === 'Update' &&
row.dataItem.AuditLogDetails.length > 0
);
}
});
}
<wj-flex-grid #gridDetail (initialized)="initGrid(gridDetail)" [itemsSource]="auditDataCollectionView" [autoGenerateColumns]=false [isReadOnly]=true> <wj-flex-grid-column [header]="'Log Date'" [binding]="'EventDateUTC'" [format]="'MM/dd/yyyy hh:mm:ss tt'" [width]="190" ></wj-flex-grid-column> [b] <wj-flex-grid-column [header]="'Activity'" [binding]="'Description'" [wordWrap] = "true" [width]="625"></wj-flex-grid-column>[/b] <wj-flex-grid-column [header]="'User'" [binding]="'UserName'" [wordWrap] = "true" [width]="100" ></wj-flex-grid-column> <wj-flex-grid-column [header]="'Category'" [binding]="'TypeFullName'" [wordWrap] = "true" [width]="100"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Activity Type'" [binding]="'Action'" [wordWrap] = "true" [width]="200" ></wj-flex-grid-column> <wj-flex-grid-column [header]="'Log Type'" [binding]="'AuditCategoryName'" [wordWrap] = "true" [width]="200" ></wj-flex-grid-column> <wj-flex-grid-column [header]="'Application'" [binding]="'ApplicationName'" [wordWrap] = "true" [width]="200" ></wj-flex-grid-column> </wj-flex-grid>
Thanks,
