Posted 2 January 2024, 1:21 pm EST
Dear Sonu ,
This is the first post where I had to explain this much to know an event/method that indicates the grid is fully loaded. Below is the HTML and formatItem code. We are loading a few column dynamically :
<wj-flex-grid
#flexGrid
class=“DataGrid DataGridFlexScroll widthClass btn-addreport”
[itemsSource]=“customData”
[showMarquee]=“true”
[showSort]=“true”
[autoRowHeights]=“true”
[headersVisibility]=“‘Column’”
(initialized)=“gridInitialized(flexGrid)”
[frozenColumns]=“frozenColumnCount”
[bentoBusyLoader]=“isDataLoading”
(selectionChanged)=“handleSelectionChanged(flexGrid, $event)”
>
<wj-flex-grid-column
[header]="'Column 1'"
[binding]="'Column1'"
[minWidth]="360"
[width]="'*'"
[visible]="true"
[isReadOnly]="true"
[wordWrap]="true"
></wj-flex-grid-column>
<wj-flex-grid-column
*ngFor="let col of colArr"
[binding]="col.binding"
header="{{ col.header }}"
[allowSorting]="false"
[autoSizeRows]="false"
[isReadOnly]="true"
[wordWrap]="true"
>
<ng-template
wjFlexGridCellTemplate
[cellType]="'Cell'"
let-cell="cell"
let-row="row"
let-item="item"
[autoSizeRows]="false"
>
<bento-checkbox type="checkbox" id="{{ row.index }}_{{ col.binding }}"
(change)="onCheckBoxChange()" [(ngModel)]="item[col.binding]" />
</ng-template>
</wj-flex-grid-column>
</wj-flex-grid>
Below is the formatItem , we are using it to make the Column header a hyperlink which will open a pop-up on click
gridInitialized(flexGrid) {
flexGrid.hostElement.addEventListener(
‘keydown’,
(e) => {
this.lastPressedKey = e.code;
// Manually select the nect cell.
if (e.code === 'Tab') {
let cell = this.getNextColumnToSelect();
flexGrid.select(cell.row, cell.col);
//
e.preventDefault();
}
},
true
);
if (flexGrid.rows) {
flexGrid.rows.defaultSize = 50;
flexGrid.columnHeaders.rows.defaultSize = 50;
}
flexGrid.formatItem.addHandler((s, e) => {
let val = s.columns[e.col];
if (this.disableHyperlink) {
e.cell.innerHTML = peerGroup.peerGroupName;
e.cell.setAttribute('role', 'columnheader');
} else {
e.cell.innerHTML =
'<h2 class="h6 mb-0 DataGrid-heading">' +
'<a href="" id="' +
headerId +
'" role="link" aria-label="' +
val.header +
'"data-headerid="' +
headerId +
'" data-pgid="' +
pgId +
'">' +
val.header +
'</a></h2>';
e.cell.setAttribute('role', 'columnheader');
let el = e.cell.querySelector('a');
el.onclick = (et: any) => {
et.preventDefault();
let dataSet = et.target.dataset;
console.log(dataSet);
this.showPopUp(dataSet);
};
}
});
this.flexGrid = flexGrid;
let filter = new wjcGridFilter.FlexGridFilter(this.flexGrid);
this.gridFilter = filter;
}
