Double click on grid row with angular

[Chris]

How can I catch a double click event on a grid row when using the angular directive for the grid?

I've seen in other questions the response has been to use jQuery and bind to the DOM event but this isn't a good solution for angular.

[Kiril Nikolov]

Hi Chris,

You can use the ngDblclick directive along with a row template to attach a click handler for the Kendo UI Grid row. Here is an example how to do it:

http://dojo.telerik.com/oQUcU

Regards,
Kiril Nikolov
Telerik

 

 

[Chris]

In the example you linked it doesn't show any data so using that method I have to generate the entire row template for all of the columns in the datasource. My datasource has a dynamic set of columns so this will be quite painful just to add a double click event.

There should be an easier way e.g. is there a way to attach ng-dblclick after kendo generates the row html?

[Kiril Nikolov]

Hi Chris,

After the grid is created you can only use jQuery to attach the standard double click event and handle it. If you want to use ng-dblclick you will need to use the templates as shown in the example.

Regards,
Kiril Nikolov
Telerik

 

 

[Augusto]

I'm using the kendo ui grid together with angular. I'm trying to "use jQuery to attach the standard double click event" to each row. Is there any "init" event of the grid where I can attach the double-click handler? And how do I get the dataItem corresponding to the double-clicked row inside the handler? Thanks

[Chris]

Hi Augusto,

I used the databound event

e.g.

dataBound: function (e) {
    var grid = this;
    grid.tbody.find("tr").dblclick(function (e) {
        var dataItem = grid.dataItem(this);
        ...
    });
},

[Augusto]

Hi Cris, thanks for the quick response.

Actually, I ended up doing something similar but I didn't know I could get a reference to the grid using "this". I have changed my code to look similar to yours because it's cleaner.

Thank you!

[Kiril Nikolov]

Hello Guys,

 

I am happy to hear that the problem is resolved.

 

In case you have any further questions, please do not hesitate to contact us.

 

Regards,
Kiril Nikolov
Telerik

 

 

[Radoslaw]

I created a directive to be able to share the dblClick event handling more easily between controllers:

Code - https://gist.github.com/rmaziarka/fa10d6314a7fc9797c2c

Post about this directive in my blog - http://radblog.pl/2016/03/double-click-on-kendo-grid-row-with-angular-directive/

I hope that it will help you :)

[Augusto]

@Radoslaw Nice, thanks for sharing your solution. I'll probably use it.

I think it'd also be nice if those event handlers could be set as part of the Grid Options. At least for the most commonly used events (click, dblclick and hover for example).

[Kiril Nikolov]

Hello Radoslaw,

Thanks for sharing your solution with us!

As a small gesture of gratitude I have updated your Telerik Points balance.

Regards,
Kiril Nikolov
Telerik

 

 

[Toine]

I'm looking for a same solution with Angular2+ can someone help me with that?

[Dimiter Topalov]

Hi Toine,

You can check out the following example from our documentation, demonstrating how to open a row for editing on click via a directive:

http://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-row-click/

... and modify it to best suit your purposes, for example - change the event to double click, and do as the scenario requirements dictate with the data item, corresponding to the double clicked row, e.g.:

http://plnkr.co/edit/X84M83Xy7VDLyt6LiTt0?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik