feat(tree-grid): change default expandedLevels; fix for pinned columns #2530

Author: DiyanDimitrov

Diff for: projects/igniteui-angular/src/lib/tree-grid/tree-cell.component.ts

@@ -35,7 +35,7 @@ export class IgxTreeGridCellComponent extends IgxGridCellComponent {
         const indentationLevel = this.indentation;
         const expandedLevels = (<IgxTreeGridComponent>this.grid).expandedLevels;
 
-        return expandedLevels < 0 || (expandedLevels >= 0 && indentationLevel < expandedLevels);
+        return indentationLevel < expandedLevels;
     }
 
     public toggle() {

Diff for: projects/igniteui-angular/src/lib/tree-grid/tree-grid-row.component.html

@@ -7,7 +7,15 @@
     </div>
 </ng-container>
 <ng-container *ngIf="pinnedColumns.length > 0">
-    <igx-grid-cell *ngFor="let col of notGroups(pinnedColumns)" [column]="col" [row]="this" [style.min-width.px]="col.width" [style.flex-basis.px]="col.width" [value]="rowData[col.field]" [cellTemplate]="col.bodyTemplate"></igx-grid-cell>
+    <ng-template ngFor let-col [ngForOf]="notGroups(pinnedColumns)">
+        <ng-template #cellTemplate>
+            <igx-grid-cell [column]="col" [row]="this" [style.min-width.px]="col.width" [style.flex-basis.px]="col.width" [value]="rowData[col.field]" [cellTemplate]="col.bodyTemplate" #treeCell></igx-grid-cell>
+            </ng-template>
+        <ng-template #treeCellTemplate>
+            <igx-tree-grid-cell [column]="col" [row]="this" [style.min-width.px]="col.width" [style.flex-basis.px]="col.width" [value]="rowData[col.field]" [cellTemplate]="col.bodyTemplate" #treeCell></igx-tree-grid-cell>
+        </ng-template>
+        <ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate; context: getContext(col)"></ng-container>
+    </ng-template>
 </ng-container>
 <ng-template igxFor let-col [igxForOf]="notGroups(unpinnedColumns)" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
     <ng-template #cellTemplate>
@@ -16,5 +24,5 @@
     <ng-template #treeCellTemplate>
         <igx-tree-grid-cell [column]="col" [row]="this" [style.min-width.px]="col.width" [style.flex-basis.px]="col.width" [value]="rowData[col.field]" [cellTemplate]="col.bodyTemplate" #treeCell></igx-tree-grid-cell>
     </ng-template>
-    <ng-container *ngTemplateOutlet="colIndex === 0 ? treeCellTemplate : cellTemplate; context: getContext(col)"></ng-container>
+    <ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate; context: getContext(col)"></ng-container>
 </ng-template>

Diff for: projects/igniteui-angular/src/lib/tree-grid/tree-grid.component.ts

@@ -89,7 +89,7 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent {
 	 * @memberof IgxTreeGridRowComponent
      */
     @Input()
-    public expandedLevels = -1;
+    public expandedLevels = Infinity;
 
     private _expandedStates:  Map<any, boolean> = new Map<any, boolean>();
 

Diff for: projects/igniteui-angular/src/lib/tree-grid/tree-grid.pipes.ts

@@ -105,7 +105,7 @@ export class IgxTreeGridFlatteningPipe implements PipeTransform {
 
             let isExpanded = expandedStates.get(rowID);
             if (isExpanded === undefined) {
-                isExpanded = expandedLevels < 0 || (expandedLevels >= 0 && indentationLevel < expandedLevels);
+                isExpanded = indentationLevel < expandedLevels;
             }
 
             if (isExpanded) {

Diff for: src/app/tree-grid/tree-grid.sample.html

@@ -6,9 +6,10 @@
 
     <div class="sample-content">
         <div class="sample-column">
-            <igx-tree-grid #grid1 [data]="data" childDataKey="ChildCompanies" expandedLevels="1" [rowSelectable]="true" [paging]="false" [width]="'900px'" [height]="'500px'">
+            <igx-tree-grid #grid1 [data]="data" childDataKey="ChildCompanies" [rowSelectable]="true" [paging]="false" [width]="'900px'" [height]="'500px'">
                 <igx-column *ngFor="let c of columns" [field]="c.field"
                                                     [header]="c.field"
+                                                    [pinned]="c.pinned"
                                                     [movable]="c.movable"
                                                     [groupable]="false"
                                                     [resizable]="c.resizable"

Diff for: src/app/tree-grid/tree-grid.sample.ts

@@ -18,7 +18,7 @@ export class TreeGridSampleComponent implements OnInit {
 
     public ngOnInit(): void {
         this.columns = [
-            { field: 'ID', width: 150, resizable: true, movable: true },
+            { field: 'ID', width: 150, resizable: true, movable: true, pinned: true },
             { field: 'CompanyName', width: 150, resizable: true, movable: true },
             { field: 'ContactName', width: 150, resizable: true, movable: true },
             { field: 'ContactTitle', width: 150, resizable: true, movable: true },