CODEWITHSUNDEEP
angularjsangular-ui-grid
DaveC426913
DaveC426913

Reputation: 2046

AngularJS : ui-grid: dynamic expandableRowHeight

ui-grid's expandable row feature works great if every parent row has the same number of subrows in its subGrid, and therefore the same height. Not so great if the number of subrows in the subGrid varies from row-to-row of the parent.

I've been able to get the subGrid ITSELF to have a dynamic height by passing in the array length and using that to generate a subGrid-height:

lengthOfList: data[i].friends.length

style="height:{{row.entity.subGridOptions.lengthOfList * 30}}px;

But since that subGrid has to live WITHIN the parent grid, the parent grid needs to push its rows down to make room. And it needs to do so by a different amonut for each row. Unfortunately the parent grid has a single, fixed expandableRowHeight for ALL rows. I can't specify the expandableRowHeight for EACH row.

Best I can hope for is to alter the expandableRowHeight on-the-fly, as I click on a row to open it.

Trying to figure out how to listen for the open expandable row event.

ui-grid is a shrink-wrapped plugin that writes it own DOM elements, so I have no way of adding anything to the elements that might help me capture events on them.

How can I configure the expandableRowHeight on-the-fly?

Plunker:

http://plnkr.co/edit/1IeEsXZAf9pRgKmy5jfO?p=preview

(The plunker is misbehaving. 1] A font that ui-grid is using is now blocked due to cross-domain issues, 2] sometimes the html template goes AWOL for no discernible reason.)

Upvotes: 3

Views: 8301

Answers (5)

Sidharth
Sidharth

Reputation: 1

I tried a different approach to the solution using CSS alone instead of leveraging the "expandableRowHeight" property. And this worked for me.

The parent grid data is rendered inside a div with class name "ui-grid-canvas". Add the following style -

.ui-grid-canvas{
   height: auto !important;
   overflow: auto !important;
}

For expanded child table, add a style to div with class name "expandableRow"

 .expandableRow{
    height: auto !important;
 }

Also, do not set the "expandableRowHeight" property in gridOptions.

Upvotes: 0

CodingTT
CodingTT

Reputation: 1145

This is how it works, I checked other people's solution, they all not working

Let's assume that the headerRowHeight is 39px.

The template should be something like this :

'<div ui-grid="row.entity.subGridOptions" ng-style="{height: (row.entity.youList.length * row.entity.subGridOptions.rowHeight) + 39 + \'px\'}" ui-grid-selection ui-grid-edit ui-grid-cellnav ui-grid-validate ui-grid-auto-resize ui-grid-resize-columns></div>'

The rowExpandedStateChanged should be this:

gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
            $timeout(function() {
                row.expandedRowHeight = row.entity.youList.length * row.entity.subGridOptions.rowHeight + 39;
            }, 150);
        });

Upvotes: 3

Josua Wilson
Josua Wilson

Reputation: 33

Finally got this sorted, the important thing to know is that the expandable row has a row height, and a sub (expandable) grid size height inside that row, so if you need to display the grid to fit exactly inside the row, you need to set both heights to the same dynamic size. Inside your top level grid api you need to specify :

$scope.gridOptions = {
    onRegisterApi: function(gridApi) {
        gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {               
                row.expandedRowHeight = (row.entity.subGridOptions.data.length * rowHeight) + headerHeight;
            });
        });
    }
}

but now u use the expandedRowHeight variable from ui-grid version 3.0.0+, not available in 2+, the expandableRowHeight does not seem to have any affect, but might be used to set the global value for expandedRowHeight. (Note the different naming of these 2 variables on the grid)

Now this will size your top Grid row to display your sub grid correctly.

In the expandableRowTemplate.html for the sub grid u need to specify the height dynamically of the sub grid using the css style:

<div ui-grid="row.entity.subGridOptions" style="height:{{(row.entity.subGridOptions.data.length * rowHeight) + headerHeight}}px"  ui-grid-auto-resize></div>

this works very well for me currently, and might help someone out there.

Note that it could also help to investigate the ui-grid-autoresize directive now in ui-grid 3+, apparently this helps in accomplishing this, not 100% sure if I used it correctly, but it works

Upvotes: 3

tony
tony

Reputation: 921

As an update for 3.0.0 stable there is a rowExpandedBeforeStateChanged event. If you use rowExpandedStateChanged then your grid won't update w/ the new expandableRowHeight you're trying to set.

$scope.gridOptions.onRegisterApi = function(gridApi) {
    // dynamic expandable rows
    gridApi.expandable.on.rowExpandedBeforeStateChanged($scope, function(row) {
        $scope.gridOptions.expandableRowHeight = 30 + row.entity.valueArray.length * 30;
    });
};

Upvotes: 5

DaveC426913
DaveC426913

Reputation: 2046

Ah. I found the gridApi. So this solution works!

$scope.gridOptions = {
    onRegisterApi: function(gridApi) {
        gridApi.expandable.on.rowExpandedStateChanged($scope,function(row){
            $scope.gridOptions.expandableRowHeight = row.entity.mySubRowItems.length * 30;
        });
    }
}

I'm sure there's a way of referring to the row's parent grid directly. Instead of $scope.gridOptions, there's surely some row $parent reference, I just haven't found it yet.

Upvotes: 6

Related Questions