CODEWITHSUNDEEP
angularjsng-grid
Pritish
Pritish

Reputation: 767

ngGrid double click row to open pop-up for editing a row

How would I go about implementing a double-click event in ng-Grid? More particularly, I want the double-clicking to open a pop-up modal(Angular UI Modal) for editing.

Any ideas on how to do this?

Upvotes: 3

Views: 9859

Answers (2)

Rodolfo Jorge Nemer Nogueira
Rodolfo Jorge Nemer Nogueira

Reputation: 5100

In ng-grid 2.0.11, do a simply call to ng-dblclick directive in row template

$scope.gridOptions = {
    data: 'gdDtA',
    rowTemplate: '<div ng-dblclick="foo(row)" ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex() }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>',        
};

$scope.foo = function(r) {
    console.log(r);
}

See in: https://github.com/angular-ui/ng-grid/wiki/Templating

Upvotes: 8

boatcoder
boatcoder

Reputation: 18107

From the link in the comment on the question by @AardVark71 Add Doubleclick Behavior to ng-grid

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

/* 
 DoubleClick row plugin
*/

function ngGridDoubleClick() {
    var self = this;
    self.$scope = null;
    self.myGrid = null;

    // The init method gets called during the ng-grid directive execution.
    self.init = function(scope, grid, services) {
        // The directive passes in the grid scope and the grid object which
        // we will want to save for manipulation later.
        self.$scope = scope;
        self.myGrid = grid;
        // In this example we want to assign grid events.
        self.assignEvents();
    };
    self.assignEvents = function() {
        // Here we set the double-click event handler to the header container.
        self.myGrid.$viewport.on('dblclick', self.onDoubleClick);
    };
    // double-click function
    self.onDoubleClick = function(event) {
        self.myGrid.config.dblClickFn(self.$scope.selectedItems[0]);
        self.$scope.$apply();
    };
}

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

$scope.myDblClickHandler = function(rowItem) {
// rowItem is actually the entity of the row ...
}

$scope.gridOptions = {
    // other config here...
    dblClickFn: $scope.myDblClickHandler,
    plugins: [ngGridDoubleClick]
}

This function does not have to be on the $scope for this to work.

Upvotes: 0

Related Questions