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?
Hi,
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>
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
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>
HI Martin, Can you please provide information how we can achieve the below functionality by passing cell as parameter?
It would be very much helpful.
I have created a sample in StackBlitz for your reference. Let me know if that solves your issue.
I am glad that you find my suggestion helpful.
Thank you for using Infragistics components.
Hi Martin Asennov,
Thank you for help, this actually worked for me.