Display a Button in Hierarchical Grid Rows

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:

	
		
			delete
		
	

Did you have the chance to look at our documentation page about igxHierarchicalGrid? There you can find many samples that use templates in the columns. This particular one, for example, uses the igxButton directive in the last 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

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:

	
		View Data
	

Please let me know if you need more information.

So, in function definition, what be the type of argument for cell?

Hi Martin,

what should i give the type for cell in the function def, can u just give the sample of the function please, it would be very much helpful.

For ex:

getData2(cell: 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 => {

});

Thanks

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.

Thanks

Hi,

I have created a sample in StackBlitz for your reference. Let me know if that solves your issue.

Hi Martin Asennov,

Thank you for help, this actually worked for me.

Hi,

I am glad that you find my suggestion helpful.

Thank you for using Infragistics components.