CODEWITHSUNDEEP
javascriptangularjsng-grid
pandasShouldntProgram
pandasShouldntProgram

Reputation: 3

angular-js ng-grid rowTemplate conflicting with enableCellEdit?

Looking at the examples for ng-grid, I see that there's both the ability to add a rowTemplate for styling, etc and the ability to do excel-like editing by tabbing through the cells to enter data. Is there a known conflict with the two? Or am I just not configuring the datagrid correctly? As soon as the rowTemplate is applied, the ability to tab through the fields is lost.

Here's the example plunker from the ng-grid github page for reference:
http://plnkr.co/edit/fGhK5VNwFH6GNakZ1TVq?p=preview

//main.js
$scope.myData = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}];
$scope.gridOptions = { 
    data: 'myData',
    enableCellEdit: true,
    enableCellSelection: true,
    rowTemplate: '<div style="height: 100%" ng-class="{green: row.getProperty(\'age\') < 30}"><div 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></div>'
};

I'm using angular 1.2.3 and ng-grid 2.0.13

Upvotes: 0

Views: 1575

Answers (1)

mainguy
mainguy

Reputation: 8331

Write you rowTemplate like this:

  var tabrow = "<div  ng-style=\"{ 'cursor': row.cursor }\" ng-repeat=\"col in renderedColumns\" ng-class=\"col.colIndex()\" class=\"ngCell {{col.cellClass}}\">\r" +
    "\n" +
    "\t<div class=\"ngVerticalBar\" ng-style=\"{height: rowHeight}\" ng-class=\"{ ngVerticalBarVisible: !$last }\">&nbsp;</div>\r" +
    "\n" +
    "\t<div ng-class=\"{green: row.getProperty(\'age\') < 30}\" ng-cell></div>\r" +
    "\n" +
    "</div>";

Note the custom colorizer ng-class=\"{green: row.getProperty(\'age\') < 30}\"

Then use the template in your gridOptions:

  $scope.gridOptions = {
    data: 'myData',
    enableCellEdit: true,
    enableCellSelection: true,
    rowTemplate: tabrow
  };

Try this Plunker

Upvotes: 1

Related Questions