CODEWITHSUNDEEP
ui-grid
Todd Willoughby
Todd Willoughby

Reputation: 45

Angularjs UI-Grid - How to expand row without laying over next row

Using the ui-grid with great success with 3 nested levels. Business needs an expanded row to push down then next row rather than overlaying on top of successive rows. Not finding how this overflow/z-layer functionality is controlled inside of the ui-grid.js file. Any suggestion on how to get this to work? Thanks!

Upvotes: 0

Views: 1885

Answers (2)

Javier Ramirez
Javier Ramirez

Reputation: 1

In my case I have a an ui-grid called myTable and inside it can be some rows of a sub-grid. The main grid is filled with an array array1. Each element of array1 can contain an array of details. Only I need to do this operation (to set height attribute of sub-grid):

$scope.myTable.expandableRowHeight *= ( 2 + row.entity.details.length ) ;

row.entity must be an element from array1 (the main grid's array)

Then, the expandCollapse method should be like this:

$scope.expandCollapseRow = function(row,$event){
    $event.stopPropagation();
    $scope.myTable.expandableRowHeight *= ( 2 + row.entity.details.length ) ;
    $scope.gridApi.expandable.toggleRowExpansion(row.entity);
};

Please don't forget that expandableRowHeight is an existing attribute of angular-ui grid.

You can see the attribute into gird setup in this image:

you can see the attribute into gird setup ion image below

Upvotes: 0

Todd Willoughby
Todd Willoughby

Reputation: 45

Figured it out. The ui-grid.js file contains all the templates at the bottom of the 28,000 lines. I pulled all the html for "ui-grid/expandableRow" into its own template file in my code and modified it to meet some needs. In the angularjs, I specify that template as such with my own naming convention:

expandableRowTemplate: 'AngularApp/Templates/expandableAssetsRowTemplate.html'

That templates's code looks like this. I had to remove the directive 'ui-grid-expandable-row' for some strange reason in order to work):

<div ui-grid="row.entity.subGridOptions" ui-grid-pagination ui-grid-expandable ui-grid-edit ui-grid-row-edit ui-grid-cellNav ui-grid-move-columns ui-grid-resize-columns
     ng-if="expandableRow.shouldRenderExpand()"
     class="expandableRow"
     style="float:left; margin-top: 1px; margin-bottom: 1px"
     ng-style="{width: (grid.renderContainers.body.getCanvasWidth()) + 'px' , height: row.expandedRowHeight + 'px' }">
</div>

The other thing that affected the outcome is an expandable row height in the parent grid's gridOptions:

expandableRowHeight: 390

The nested grid has a height specification, but this expanded row height allows the parent grid to expand the row to the correct height.

The end result of all this is that my parent grid's rows now expand and the nested grid pushes the rest of the parent rows downward rather then laying over them.

Note: I originally went with a vanilla expandableRowTemplate as found in the tutorials and that is why my expansion wasn't working right.
Sample of a bad template (as compared to the one above):

<div ui-grid="row.entity.subGridOptions"   ui-grid-expandable
     ui-grid-edit ui-grid-row-edit ui-grid-cellNav ui-grid-move-columns ui-grid-resize-column>
</div>

Upvotes: 1

Related Questions