How to add bootsrap buttons on an edit column and add click events for them

[learner1010Participant]

Hi

In my angular 8 app, i have loaded the jqxGrid as follows

view

<jqxGrid 
	[selectionmode]="'checkbox'" 
	[source]="source" 
	[theme]="'material'" 
	[autoheight]="true" 
	[pageable]="true" 
	[altrows]="true" 
	[filterable]="true" 
	[sortable]="true" 
	[columns]="columns" 
#grid>
</jqxGrid>  

compoenent

export class CertificateBuilderComponent implements OnInit, AfterViewInit {
  @ViewChild('grid', { static: false }) grid: jqxGridComponent;

  columns : any = [
		{text: 'Id', datafield: 'id', width : 10},
    {text: 'title', datafield: 'title'},
    {
      text: 'Edit', width: 100,  datafield: 'Edit', columntype: 'button',
      cellsrenderer: function (cellvalue, options, rowObject) {
 
           return '<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever=""  onclick="somet1()">Edit</button>';
       }
      
    }
  ]; 
  
//other code here
  
}

when the grid loads it shows like this:

But the issue i’m having is, when the user clicks a bootstrap edit button it should fetch the data in that row, how do i do this in angular and also how to an execute a function in the component’s class on that button click?

thanks

[learner1010Participant]

Here is the image of the grid for some reason the image did not show up on the original post

https://drive.google.com/file/d/168rrmafWYJQsTqoXAWOUYrXuQyLGePjg/view?usp=sharing

[HristoParticipant]

Hello learner1010,

I would like to suggest you look at the approach below and try to use it:
https://stackblitz.com/github/jqwidgets/angular/tree/master/grid/popupediting/

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts