Double click on grid row with angular

13 posts, 0 answers
  1. Chris
    Chris avatar
    11 posts
    Member since:
    Mar 2013

    Posted 12 Sep 2014 Link to this post

    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.
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 16 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Chris
    Chris avatar
    11 posts
    Member since:
    Mar 2013

    Posted 21 Sep 2014 in reply to Kiril Nikolov Link to this post

    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?
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 22 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Augusto
    Augusto avatar
    8 posts
    Member since:
    Aug 2011

    Posted 09 Dec 2015 Link to this post

    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

  6. Chris
    Chris avatar
    11 posts
    Member since:
    Mar 2013

    Posted 09 Dec 2015 in reply to Augusto Link to this post

    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);
            ...
        });
    },

  7. Augusto
    Augusto avatar
    8 posts
    Member since:
    Aug 2011

    Posted 09 Dec 2015 Link to this post

    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!

  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 10 Dec 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Radoslaw
    Radoslaw  avatar
    7 posts
    Member since:
    Jun 2015

    Posted 06 Mar 2016 Link to this post

    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 :)

  10. Augusto
    Augusto avatar
    8 posts
    Member since:
    Aug 2011

    Posted 06 Mar 2016 Link to this post

    @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).

  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 07 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Toine
    Toine avatar
    3 posts
    Member since:
    Nov 2012

    Posted 06 Aug Link to this post

    I'm looking for a same solution with Angular2+ can someone help me with that?
  13. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    628 posts

    Posted 08 Aug Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top