passing jquery event to column command in template

[Martin]

I want to use a template for my command button. like this:

 

command: [
    {
        name: "editReport",
        template: "<button type='button' class='btn btn-link' title='Redigér rapport' data-ng-click='vm.onEdit()' data-ng-disabled='!vm.canEdit'><i class='fa fa-pencil' aria-hidden='true'></i></button>"
    } as any,
    {
        name: "deleteReport",
        template: "<button type='button' class='btn btn-link' title='Slet rapport' data-ng-click='vm.onDelete()' data-ng-disabled='!vm.canDelete'><i class='fa fa-minus' style='color:darkred' aria-hidden='true'></i></button>"
    } as any,

],
title: "Handlinger", width: 50

We are in a Angular controller and I want to get the JQueryEventObject in the vm.onDelete() function.

If that not possible then maybe I could get the Id of the row in the binding   vm.onDelete({{dataItem.Id}}).

Or is there another way to make a image button?

public onDelete = (e: JQueryEventObject) => {
           this.$confirm({ text: 'Ønsker du at slette rapporten?', title: 'Slet rapport', ok: 'Ja', cancel: 'Nej' })
               .then(() => {
                   var dataItem = this.mainGrid.dataItem(this.$(e.currentTarget).closest("tr"));
                   var entityId = dataItem["Id"];
                   this.mainGrid.dataSource.remove(dataItem);
                   this.mainGrid.dataSource.sync();
               });
       }

[Dimiter Topalov]

Hello Martin,

Using a template for the command column is not supported, but you can create a regular template column, and customize its content in accordance with your preference, and the scenario requirements, e.g.:

http://dojo.telerik.com/UWoJo

The event data can be passed to the click handler via onClickHandler($event). Then in the handler, the dataItem, corresponding to the row the clicked button is in, can be obtained via $(e.target).closest('tr').

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Martin]

Thanks for a very good example that solved my problem. The real trick for me was using $event in the template.

Have you completely killed jquery in Kendo UI for Angular 2.0? I really hope so. and can't wait to try it out

[Dimiter Topalov]

Hello Martin,

You can check out the progress on Kendo UI for Angular 2 and try the most recently added components here:

http://www.telerik.com/kendo-angular-ui/

Regards,
Dimiter Topalov
Telerik by Progress