HI,
I'm trying to add a button in a template column in an IgGrid component in an Angular2 application. I've examined the examples above but can't see how to bind a click event to the button. I've tried an inline template but the click event isn't binding.
columns: [ .......
{ key: "Delete", headerText: "", dataType: "string", width: "20%", template: "<button class='btn- btn-primary btn-sm' (click)='deleteRecord(${id})'>Delete</button>" } ]
I couldn't get it working with the JQuery template approach either. just adding an onlick event to the button fires an event but not withint the angular2 component
Can anyone recommend a solution?
Hello,
What Angular 2 is providing for this scenario are two options and you'll have to keep in mind that they may require quite a lot of customization.
Either you create components dynamically for each of the template cells you want and append those components to the cells you want, or you'll have to use the javascript onclick event and invoking a method from outside of the scope of the component context.
If you have more questions on any of the approaches, I'll be glad to help you out.
Thanks for the reply. That's far too much work for what I am trying to acheieve. I'll put the button off grid and pick up the selected column instead to pass to my function.
I am using infragistics trial version and trying angular grid samples, There is no proper documentation for iggrid for angular2/4. I am also facing the same issue while creating the column template. The click event is not hit for the buttons inside the template column controls
{headerText: "Action",key: "Delete",dataType: "string",width: "20%",unbound: true,template: "<button type='button' (click)='myClick()'>Click Me</button> <span>{{clickedStatus}}</span> <span>ProductID</span>"}
Please can you provide me an example so that we can solve this.
Thanks in advance.
Hello Venkatraman,
I've implemented custom component included into the column template.
At this point this is the suggestion for Ignite UI template into Angular.