Menu
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>
577
There will be a button on top of the grid, a user can click on that button to expand/ collapse multiple rows in the tables. Let’s start… We’ll create a new Angular project using the Ng CLI tool.
The ng-container with column definition named expandedDetail is used as an alternate table row, which will be toggle based on the expanded boolean value. The animation state is used to animate expand and collapse behaviour.
Implement Expand/ Collapse Feature in Material Datatable In the Datatable, we’ll add an extra row after each existing one to have Subjects information. This extra row will remain hidden controlled by the isExpanded property having boolean value. We will also add the animation effect to expand and collapse with a smooth transition effect using
We’ll demonstrate expand-collapse using both ways. On top of the table, two buttons will be able to expand or collapse all the rows of the table at once. The rows of tables will be having an optional boolean property expanded to know which row is in an expanded state.
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:
<div ng-controller="MyCtrl">
<table class="table dataTable no-hover">
<tbody>
<tr ng-repeat-start="row in rows" ng-init="ind = $index">
<td ng-click="rowExpanded[row.name]=!rowExpanded[row.name]"></td>
<td ng-repeat="val in row.vals" class="column"> </td>
</tr>
<tr id="rowexpand" ng-show="rowExpanded[row.name]" colspan="100%" ng-repeat-end></tr>
</tbody>
</table>
</div>AngularJS Controller:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.rowExpanded=[];
$scope.rows= [
{ "name": "row1",
"vals" :[1, 2, 3, 4, 5],
},
{ "name": "row1",
"vals" :[1, 2, 3, 4, 5],
}
]
}If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
