Collapsible rows in AngularJS ng-grid doesn't render correctly

Question

I have an ng-grid where I need to use a separate button to enable collapsibility of rows. When it gets rendered, I can see the button function works correctly, *but the expected UI change(adding new line in the row) doesn't work. Although the line(paragraph with <p></p> ) can find in chrome dev tools element search,but it doesn't appear in my UI.

custom button template :-

$scope.expandingButton = '<div ng-controller="MyCtrl"><button ng-show="expandOperator" ng-click="changeOperator(flase)">-</button><button ng-show="!expandOperator"  ng-click="changeOperator(true)">+</button></td><div ng-show="expandOperator "><div ng-init="projects=[{name:SMSSPM,tr:TR},{name:SMSSPM,tr:TR}]"><p ng-repeat="project in projects">Expandability! Its awesome</p></div></div></div>'

row template in gridOptions :-

rowTemplate: '<div ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex(),\'height\': \'150px\' }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>',

column definitions in gridOptions :-

columnDefs: [{field:'expand', displayName:'Expand', width: "auto",cellTemplate:$scope.expandingButton},{field:'name', displayName:'Name', enableCellEdit: true}, {field:'age', displayName:'Age', enableCellEdit: true}, {field:'designation', displayName:'Designation', enableCellEdit: true}, {displayName:'Update',cellTemplate:$scope.editableInPopup, enableCellEdit:false}],

*I can see the expected result in last row of the table.

It's confusing. I thought it's something related to cell width and height but seems it's something else. Can someone help me to figure this out?

Answer 1

I think ng-grid rows are not collapsible. Generated CSS values prevent the grid for making it collapsible. It'll be easy to implement a tooltip or bootstrap popup on your button click to show the description. If you really want collapsible rows try HTML tables.