Hi All,
I need assistance where i have a requirement for display data in tabular form which iam able to do in hierarchiacal manner. But, i also want to display a button in a rows in the table in data grid.
Ex: in a column i want to display buttons and rest column must data what we render from api call.
Can you guys please Help or provide info, how can we implement this?
So, in function definition, what be the type of argument for cell?
Hi,
The click event does not emit an argument of type IGridCreatedEventArgs but of type of mouse event. If your goal is to get the key of the row you can pass the cell to the handler:
<igx-column [width]="'100px'"> <ng-template igxCell let-cell="cell"> <button mdbBtn color="primary" (click)="getData2(cell, 'field3')">View Data</button> </ng-template> </igx-column>
Please let me know if you need more information.
Hi Martin, i was actually able to show the buttons in the columns but now my requirement is like i want to call an API and display some data based on the particular button clicked in the row which accepts aparameter from the row data clicked.
I was able to do the api call successfully through row-island, but when iam using a button and calling the api , iam getting an error.
For exampe:
<igx-row-island [primaryKey]="'field3'" (onGridCreated)="getData1($event, 'Id')" [key]="'Albums'" [autoGenerate]="false">
<igx-column header="field1" field="field1"></igx-column>
<igx-column field="field2" header="field2" [dataType]="'string'"></igx-column>
<igx-column [width]="'100px'">
<ng-template igxCell let-cell="cell">
<button mdbBtn color="primary" (click)="getData2($event,'field3')">View Data</button>
</ng-template>
</igx-column>
</igx-row-island>
function def:
getData2(event: IGridCreatedEventArgs, _parentKey: string){
const dataState: IDataState = {
key: event.owner.key,
parentID: event.parentID,
parentKey: _parentKey,
rootLevel: false
};
this.dataService.getDetails2(dataState.parentID).subscribe(data => {
this.details=data;
});
},error => {
//Interface
export interface IDataState {
key: string;
parentID: any;
parentKey: string;
rootLevel: boolean;
}
The error iam getting here is: Cannot read property 'key' of undefined
So, can you please provide some inputs like where iam getting wrong or what we can do further to make it right and make it work, It would be very helpful.
Thanks
Thank you for posting in our community.
My suggestion is to use a templated column for your requirement:
<igx-column [width]="'100px'"> <ng-template igxCell let-cell="cell"> <button igxButton="icon" (click)="removeRow(cell.cellID.rowIndex)"> <igx-icon>delete</igx-icon> </button> </ng-template> </igx-column>