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?

    thanks!

    • 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,
        dblClickFn:$scope.onGridDoubleClick,
        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)
    https://github.com/angular-ui/ng-grid/wiki/Templating
    and it was up and running quickly.

Leave a Reply

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


six + 4 =

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="">