I was looking at the following example of treeview using Angular 1.5: link
In the css section it specifies a fixed height for .grid as follows:
.grid {
width: 500px;
height: 500px;
}
Is there a way of dynamically adjusting this height according to how a tree node is clicked to expand?
The relevant documentation for treeview is here. However, the example shown there also has a fixed height, which I would like to change to dynamic height.
To set Manual Height for UI-Grid Tree View when user Expand or Collapse the parent row
checkout onRegisterApi:
Now look at function gridHeight() where you can easily set value for height
View:
I managed to find a solution by implementing methods that dynamically change the container height. In the controller, I first initalize variables that will be used later in JS and the template using ng-style:
Then while initialize the tree view grid options, one can reference row_height. We also add the logic to add or deduct height based on
rowExpanded
androwCollapsed
events in the options:We then add the methods to controller that are needed for
addHeight()
,deductHeight()
andgetChildCount()
to work:Notice that we recursively get node count when we collapse a node. We also change the state of sub-nodes to collapsed so that the height is calculated correctly the next time.
Finally in the template, we need to reference the $scope.height_px which gives the dynamic height for the container. We do this by setting
ng-style="{ 'height': height_px }"
as follows:One problem that I encountered after this was that the mouse scroll stopped working when it was placed on top of the grid. This problem apparently has a solution as suggested here. However, the actual problem relates to disablement of scroll functionality in
ui-grid.js
. In version 3.1.1 line 2721 readsevent.preventDefault();
. I had to comment this line out for the scroll to work normally again.