Posted 25 June 2025, 11:23 am EST - Updated 25 June 2025, 11:35 am EST
Hi,
I’m currently using wj-flex-grid in my Angular app to render a dashboard list, and I’m trying to replicate the behavior shown in the attached screenshot.
I bind data to the grid using gridData = dashboardData;
dashboardData contains dashboard info such as dashboardName, dashboardTitle, creatorName, creationDate, and roleIds (for access roles)
Grid is rendered using wj-flex-grid with column templates
1. Dashboard Name column should be a clickable row
Clicking on any value in the Dashboard Name column (e.g., “FnB Dashboard”, “Golden Record Health Check”) should navigate to a new screen (Angular route), like:
/dashboard/:dashboardId
In the screenshot, the dashboard names show an icon and underline on hover — the visual hint that they are clickable.
Query ->How can I make a FlexGrid column act as a router link (or clickable element) that redirects to a dynamic route like /dashboard/{{item.dashboardId}}?
2. Shared With column should show “+X more”
In the Shared With column, I want to display:
The first role name (e.g., “Solution Developer”)
A clickable text like +2 more when there are additional roles
Clicking “+X more” should open a popup or dialog showing the full role list (Vendor, Admin, etc.)
Query → What’s the best way to achieve this using Wijmo-compatible Angular logic?
How can I show a popup (or tooltip/modal) from inside the grid when “+X more” is clicked?
Dashboard Name (Make Clickable):
<wj-flex-grid-column [binding]="'dashboardName'" [header]="'Dashboard Name'" [width]="200">
<ng-template wjFlexGridCellTemplate cellType="Cell" let-item="item">
<div class="item-name-wrap">
<a [routerLink]="['/dashboard', item.dashboardId]" class="clickable-dashboard">
<img src="assets/link-icon.svg" alt="" class="inline-icon" />
{{ item.dashboardName }}
</a>
</div>
</ng-template>
</wj-flex-grid-column>Shared With (First + “+X more”):
<wj-flex-grid-column [binding]="'roleIds'" [header]="'Shared With'" [width]="'*'">
<ng-template wjFlexGridCellTemplate cellType="Cell" let-item="item">
<div class="item-name-wrap">
<span>{{ item.roleIds[0]?.name }}</span>
<ng-container *ngIf="item.roleIds.length > 1">
<a (click)="openRolePopup(item.roleIds)" class="more-link">
+{{ item.roleIds.length - 1 }} more
</a>
</ng-container>
</div>
</ng-template>
</wj-flex-grid-column>TS
[code]public gridData: any;
public dashboardData = [
{
dashboardId: 2001,
dashboardTitle: ‘Analytics for 2025’,
dashboardName: ‘Duplicate Records Detection Dashboard’,
chartIds: [1000, 2002, 2003],
createdByMe: true,
creatorId: 4202,
creatorName: ‘Susan’,
creationDate: ‘2025/4/12 2:20:00’,
lastModifiedDate: ‘2025/4/12 2:20:00’,
roleIds: [
{ name: ‘Solution Developer’, id: ‘4010’ },
{ name: ‘Vendor’, id: ‘4011’ },
{ name: ‘Admin’, id: ‘4012’ }
]
},
{
dashboardId: 2002,
dashboardTitle: ‘Analytics for 2025-New’,
dashboardName: ‘FnB Dasboard’,
chartIds: [2000, 2001],
createdByMe: true,
creatorId: 4202,
creatorName: ‘Susan’,
creationDate: ‘2025/4/12 2:20:00’,
lastModifiedDate: ‘2025/4/12 2:20:00’,
roleIds:
},
{
dashboardId: 2004,
dashboardTitle: ‘Analytics for 2025’,
dashboardName: ‘Master Data Qualitu Overview’,
chartIds: [1000, 2002, 2003],
createdByMe: true,
creatorId: 4202,
creatorName: ‘Susan’,
creationDate: ‘2025/4/12 2:20:00’,
lastModifiedDate: ‘2025/4/12 2:20:00’,
roleIds: [
{ name: ‘Solution Developer’, id: ‘4010’ },
{ name: ‘Vendor’, id: ‘4011’ }
]
}
]
ngOnInit(): void { this.gridData = this.dashboardData;
}[/code]
HTML
[code]
<div #gridContainer
class=“static-mdm-grid-ex”
id=“manageAttributePopup”>
<wj-flex-grid id=“manageAttributePopupgrid”
#flex
[itemsSource]=“gridData”
[selectionMode]=“‘None’”
headersVisibility=“All”
[allowSorting]=“false”>
<!-- Start of Dashboard Name column --> <wj-flex-grid-column [binding]="'dashboardName'" [header]="'Dashboard Name'" [isReadOnly]=true [width]="200"> <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell" #headerTooltip> <div class="header-tooltip" [wjTooltip]="cell.col.header"> {{cell.col.header}} </div> </ng-template> <ng-template wjFlexGridCellTemplate cellType="Cell" let-item="item"> <div [wjTooltip]="item.dashboardName" class="item-name-wrap"> <span class="text-ellipsis-single-line item-name">{{ item.dashboardName }}</span> </div> </ng-template> </wj-flex-grid-column> <!-- Start of Title Name column --> <wj-flex-grid-column [binding]="'dashboardTitle'" [header]="'Title'" [width]="120"> .. </wj-flex-grid-column> <!-- Start of Owner Name column --> <wj-flex-grid-column [binding]="'creatorName'" [header]="'Owner'" [width]="'*'"> .. </wj-flex-grid-column> <!-- Start of Creation Date Name column --> <wj-flex-grid-column [binding]="'creationDate'" [header]="'Creation Date'" [width]="'*'"> .. </wj-flex-grid-column> <!-- Start of Last modified date Name column --> <wj-flex-grid-column [binding]="'lastModifiedDate'" [header]="'Last Modified Date'" [width]="'*'"> .. <ng-template wjFlexGridCellTemplate cellType="Cell" let-item="item"> <div [wjTooltip]="item.lastModifiedDate" class="item-name-wrap"> <span class="text-ellipsis-single-line item-name">{{ item.lastModifiedDate }}</span> </div> </ng-template> </wj-flex-grid-column> <!-- Start of Shared With Name column --> <wj-flex-grid-column [binding]="'roleIds'" [header]="'Shared With'" [width]="'*'"> <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell" #headerTooltip> <div class="header-tooltip" [wjTooltip]="cell.col.header"> {{cell.col.header}} </div> </ng-template> <ng-template wjFlexGridCellTemplate cellType="Cell" let-item="item"> <div [wjTooltip]=" item.roleIds?.at(0)?.name" class="item-name-wrap"> <span class="text-ellipsis-single-line item-name">{{ item.roleIds?.at(0)?.name }}</span> <span *ngIf="item.roleIds.length>1" class="text-ellipsis-single-line item-name">{{ item.roleIds?.at(0)?.name }}</span> </div> </ng-template> </wj-flex-grid-column> </wj-flex-grid> </div>
-
What is the recommended way in Wijmo FlexGrid Angular to make a cell (e.g., dashboardName) act like a router link to navigate on click?
-
For conditional rendering in a cell (e.g., showing “+X more”), how can we cleanly implement a popup/modal that appears on click within FlexGrid’s template?
A working StackBlitz example will be helpful.
Expected screenshot
Current screenshot as per above code
