Add DoubleClick behaviour to ng-grid

If you want to react when double-clicking on a row of a ng-grid in AngularJS, then you can do the following:

  1. Add the following Javascript-File to some dir accessible from your app and don’t forget to load it during startup.

  2. Define a function to handle the double-click and update the grid-options as shown here:

And now have fun :)



This entry was posted in AngularJS, Javascript / HTML / CSS and tagged , . Bookmark the permalink.

10 Responses to Add DoubleClick behaviour to ng-grid

  1. Carlos says:

    This was helpful, thank you.

  2. Lars says:

    Thanks for sharing this.
    Yet there is little gotcha here: It depends on the selection state of the row whether a rowItem is passed to your handler function. I found it more reliable to define a cell template containg an ng-dblclick element:

    rowTemplate: ‘<div ng-dblclick="onDblClickRow(row)" ng-style="{ \’cursor\’: row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div><div ng-cell></div></div>’,

  3. Mau says:

    @Lars: thanks a lot for pointing me on the right path.

  4. Javier says:

    Hello, thanks for the post,
    I’ve a problem.
    the value of “self.myGrid.config.dblClickFn” is undefinned.
    what is the problem?


    • André says:

      @Javier: Did you write your function to handle the dblClick bahavior? In the configuration the property “dblClickFn” must have a valid function from the scope. In this case it is “$scope.myDblClickHandler”. So make sure you defined this function!

      • Javier says:

        Thanks André,
        My error was that the handler function is defined after de config section:

        $scope.gridCache = {
        data: ‘myData’,
        multiSelect: false,
        plugins: [ngGridDoubleClick]
        $scope.onGridDoubleClick = function(row){
        alert(“Double Clicked “)

        I changed the place of the handler function, and the pluging works fine.
        Thank you so much

  5. D. Kermott says:

    Doesn’t work for me.
    Using AngularJS 1.2.16 and JQuery 2.1.1

    The ngGridDoubleClick function is in a script section but is supposed to get called during the ng-grid directive execution, right? or do I have to run the ngGridDoubleClick function?

    I’ll give that template suggestion from Lars a try.

  6. D. Kermott says:

    Yup, you don’t need the dblClickFn or the ngGridDblClick function.
    Just add Lars’ rowTemplate (which is slightly modified from the default rowTempalte shown on this wiki page)
    and it was up and running quickly.

Leave a Reply

Your email address will not be published. Required fields are marked *

− three = 1

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">