I am trying to achieve an expand and collapse row for ng-grid, basically what we have here http://datatables.net/examples/api/row_details.html if you click the "plus icon" your displayed with more detail.
I have seen a similar question asked here but no solution. https://github.com/angular-ui/ng-grid/issues/517
Does anyone know how to achieve this?
Any help is appreciated.
var app = angularexpand('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{
somedata: "data to be expanded in another",
moredata: 1
}, {
somedata: "b data to be expanded in another",
moredata 2
}, {
somedata: "c data to be expanded in another",
moredata: 3
}, {
somedata: "d data to be expanded in another",
moredata: 4
}, {
somedata: "e data to be expanded in another",
moredata: 5
}];
$scope.gridOptions = {
data: 'myData'
};
$scope.expandRow = function(e) {
e.preventDefault();
var getData = {
somedata: '',
moredata: ''
};
$scope.gridOptions.selectItem(index, false);
$scope.myData.splice(index + 1, 0, getData);
$(this.row.elm).append('<div>' + this.row.entity.somedata + '</div>');
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<button ng-click="expandRow($event)">add row</button>
</body>
I have never done this with ng-grid, however, have achieved this functionality with a regular table. You could write a custom directive to solve this.
Something along the lines below should do the trick. This example was NOT tested in JSFiddle. The key here is using 'ng-repeat-start' and 'ng-repeat-end' instead of just 'ng-repeat'.
HTML:
AngularJS Controller:
Currently nggrid doesn't support this feature [issue #1111][1] and its being implemented in UIGrid 3.0 version.
But i have found a workaround and this is how you can try to achieve in nggrid using rowTemplate and a little bit of jquery. hope this helps!
rowTemplate:
Also, override the ngRow style class