I have an igx-grid, and I can't get my field variables to get passed through into the ng-template. The value user is undefined:
<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false" [paging]="false" (onCellSelection)="selectCell($event)" (onColumnInit)="initColumns($event)"> <igx-column [sortable]="true" field="userName" header="User Name"></igx-column> <igx-column field="company" header="Company"></igx-column> <igx-column field="email" header="Email"></igx-column> <igx-column field="phone" header="Phone"></igx-column> <igx-column field="userName" header="Approve"> <ng-template igxCell let-user="userName"> <button igxButton igxRipple (click)="approveUser($event,user)">Approve</button> </ng-template> </igx-column> </igx-gr
Thank you! That worked!
Hello Quan,
After further testing of this matter, it seems that within the igxCell context, if you're using custom let-* keyword, it's value could be set only to "cell" if you want to retrieve information from other grid cells on the current row. For example:
let-user="cell"
And after that you may access the corresponding row data through the 'user' object, which the cell object is assigned to, for example: user.row.rowData.userName.
Please try this and let me know if you need further assistance.
Regards,
Tsanna
There are no errors in the console. Here is my full html and TypeScript code.
<h1>Pending Users</h1> <div *ngIf="!localData; else usersPage"> LOADING PENDING USERS </div> <ng-template #usersPage> <igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false" [paging]="false" (onCellSelection)="selectCell($event)" (onColumnInit)="initColumns($event)"> <igx-column [sortable]="true" field="userName" header="User Name"></igx-column> <igx-column field="company" header="Company"></igx-column> <igx-column field="email" header="Email"></igx-column> <igx-column field="phone" header="Phone"></igx-column> <igx-column field="userName" header="Approve"> <ng-template igxCell let-user="userName"> <button igxButton igxRipple (click)="approveUser($event,user)">Approve</button> </ng-template> </igx-column> </igx-grid> </ng-template>
import { Component, OnInit, ViewChild } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; import { PendingUsersService } from './pending-users.service'; import { PendingUser } from './pending-user.model'; import { Observable } from "rxjs/Observable"; import { IgxGridComponent } from 'igniteui-angular/grid/grid.component'; @Component({ moduleId: module.id, templateUrl: './pending-users.html' }) export class PendingUsersComponent implements OnInit { public localData: PendingUser[]; public test: string; @ViewChild('grid1') public grid1: IgxGridComponent; public selectedCell; constructor(private pendingUsersService: PendingUsersService) { this.test = "hello"; } records: PendingUser[]; private userGrid: string; public ngOnInit(): void { this.pendingUsersService.getPendingUsers().subscribe(records => this.localData = records); } public selectCell(event) { //this.selectedCell = event.cell; alert('select'); } public initColumns(event) { //this works //alert('init'); } public approveUser(event : PointerEvent, userName : string) { alert('Not Implemented.'); //let cell = this.grid1.getCellByColumn(this.selectedCell.rowIndex, this.selectedCell.columnField); } }
Do you receive any errors in the console? Can you send me your full sample? The provided code looks god and I cannot determine what could be the problem only from this piece of code.