Doco(treeView): fix #3601 provide example of showTreeExpandNoChildren

Author: PaulL1

misc/tutorial/215_treeView.ngdoc

@@ -53,6 +53,7 @@ are loaded only when that row is expanded.  They have a 2 second delay to simula
       $scope.gridOptions = {
         enableSorting: true,
         enableFiltering: true,
+        showTreeExpandNoChildren: true,
         columnDefs: [
           { name: 'name', width: '30%' },
           { name: 'gender', width: '20%' },
@@ -86,6 +87,7 @@ are loaded only when that row is expanded.  They have a 2 second delay to simula
        data[0].$$treeLevel = 0;
        data[1].$$treeLevel = 1;
        data[10].$$treeLevel = 1;
+       data[11].$$treeLevel = 1;
        data[20].$$treeLevel = 0;
        data[25].$$treeLevel = 1;
        data[50].$$treeLevel = 0;
@@ -100,6 +102,11 @@ are loaded only when that row is expanded.  They have a 2 second delay to simula
       $scope.toggleRow = function( rowNum ){
         $scope.gridApi.treeBase.toggleRowTreeState($scope.gridApi.grid.renderContainers.body.visibleRowCache[rowNum]);
       };
+
+      $scope.toggleExpandNoChildren = function(){
+        $scope.gridOptions.showTreeExpandNoChildren = !$scope.gridOptions.showTreeExpandNoChildren;
+        $scope.gridApi.grid.refresh();
+      };
     }]);
   </file>
 
@@ -108,6 +115,7 @@ are loaded only when that row is expanded.  They have a 2 second delay to simula
       <button id="expandAll" type="button" class="btn btn-success" ng-click="expandAll()">Expand All</button>
       <button id="toggleFirstRow" type="button" class="btn btn-success" ng-click="toggleRow(0)">Toggle First Row</button>
       <button id="toggleSecondRow" type="button" class="btn btn-success" ng-click="toggleRow(1)">Toggle Second Row</button>
+      <button id="toggleExpandNoChildren" type="button" class="btn btn-success" ng-click="toggleExpandNoChildren()">Toggle Expand No Children</button>
       <div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid"></div>
     </div>
   </file>

src/features/tree-base/templates/treeBaseRowHeaderButtons.html

@@ -1,4 +1,4 @@
-<div class="ui-grid-tree-base-row-header-buttons" ng-class="{'ui-grid-tree-base-header': row.treeLevel > - 1}" ng-click="treeButtonClick(row, $event)">
-  <i ng-class="{'ui-grid-icon-minus-squared': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel > -1 ) || row.treeNode.children.length > 0 ) && row.treeNode.state === 'expanded', 'ui-grid-icon-plus-squared': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel > -1 ) || row.treeNode.children.length > 0 ) && row.treeNode.state === 'collapsed'}" ng-style="{'padding-left': grid.options.treeIndent * row.treeLevel + 'px'}"></i>
+<div class="ui-grid-tree-base-row-header-buttons" ng-class="{'ui-grid-tree-base-header': row.treeLevel > -1 }" ng-click="treeButtonClick(row, $event)">
+  <i ng-class="{'ui-grid-icon-minus-squared': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel > -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'expanded', 'ui-grid-icon-plus-squared': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel > -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'collapsed'}" ng-style="{'padding-left': grid.options.treeIndent * row.treeLevel + 'px'}"></i>
   &nbsp;
 </div>