Tree View - hide + button when no children

[cliren]

What's the easiest way to hide the + button when no children? My tree is a simple one level tree. It would be nice to have a ng-show on that when row.treeLevel > -1. Is it possible to extend or apply an external css to fix my issue?

Issue here: http://plnkr.co/edit/6KHGvDE6v26P77XshObC?p=preview

[cliren]

I had to override uiGridViewport directive and add hasChildren (childCount might make more sense) attribute and use CSS to hide plus button. If there is a better way to override a directive, please let me know. Also, I think a better approach might be to use ng-if not render the buttons but the below was an quick solution for me.

angular.module('ui.grid.treeView')
  .directive('uiGridViewport',
  ['$compile', 'uiGridConstants', 'uiGridTreeViewConstants', 'gridUtil', '$parse', 'uiGridTreeViewService',
    function($compile, uiGridConstants, uiGridTreeViewConstants, gridUtil, $parse, uiGridTreeViewService) {
      return {
        priority: -200, // run after default  directive
        scope: false,
        compile: function($elm, $attrs) {
          var rowRepeatDiv = angular.element($elm.children().children()[0]);

          var existingNgClass = rowRepeatDiv.attr("ng-class");
          var newNgClass = "";
          var noChildrenClass = "'ui-grid-tree-view-header-row-no-children': !row.entity.$$hasChildren";
          if (existingNgClass) {
            newNgClass = existingNgClass.slice(0, -1) + ",'ui-grid-tree-view-header-row': row.treeLevel > -1, " + noChildrenClass + "}";
          } else {
            newNgClass = "{'ui-grid-tree-view-header-row': row.treeLevel > -1, " + noChildrenClass;
          }
          rowRepeatDiv.attr("ng-class", newNgClass);

          return {
            pre: function($scope, $elm, $attrs, controllers) {

            },
            post: function($scope, $elm, $attrs, controllers) {
            }
          };
        }
      };
    }]);

[PaulL1]

The expand button is there even for nodes with no children so that we can permit dynamic loading of children - i.e. the grid thinks there's no children, but when we raise the rowExpanded event you're going to go off and find some children and put them in.

We could make this behaviour switchable though.

[PaulL1]

Have added a new option: showTreeExpandNoChildren, defaults to true, so if you set it to false then it won't show the + if there are no children.

[katherine-liu]

But when we set showTreeExpandNoChildren: true, the plush icon gonna shows up anyway. If we set the showTreeExpandNoChildren: false, it won't show the plus icon on the root level if we got the children dynamically (after click the root row, it load data from API. How to make the plus icon work?

[katherine-liu]

More here, if we don't set the $$treeLevel to the leaf which is not the finally/lowest level in the tree view, all these middle level leaf won't shows up, but in the $scope.gridOptions.data;

[parth0245]

Any resolution to this.