This is a migrated thread and some comments may be shown as answers.

passing jquery event to column command in template

3 Answers 48 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Martin
Top achievements
Rank 1
Martin asked on 30 Sep 2016, 12:12 PM

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();
               });
       }

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 04 Oct 2016, 07:52 AM
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
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Martin
Top achievements
Rank 1
answered on 04 Oct 2016, 08:09 AM

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

0
Dimiter Topalov
Telerik team
answered on 06 Oct 2016, 05:55 AM
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
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Tags
Grid
Asked by
Martin
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Martin
Top achievements
Rank 1
Share this question
or