- I prefer not to utilize the default
+icon for expanding the row. - The row should expand when clicked anywhere on it.
I attempted the following:
HTML
<div ui-grid="gridOptions" ui-grid-expandable class="grid">
Controller
var app = angular.module('app',['ngTouch','ui.grid', 'ui.grid.expandable',
'ui.grid.selection','ui.grid.pagination','ui.bootstrap']);
app.controller('MainCtrl', ['$compile','$scope', '$http', '$log',
function ($compile,$scope, $http, $log) {
$scope.gridOptions = {
enableRowSelection: true,
enableHorizontalScrollbar:0,
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: 150,
expandableRowScope: {
subGridVariable: 'subGridScopeVariable'
},
onRegisterApi: function (gridApi){
$scope.gridApi = gridApi;
},
rowTemplate: '<div ng-click="grid.api.expandable.toggleRowExpansion(row.entity)" 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 }"> </div><div ng-cell></div></div>'
}
}]);
Please note that using rowTemplate resulted in nothing being displayed. However, removing it caused the rows to be unclickable.