fix(tree-grid): update tree-grid template to allow custom row-edit, #…

…5431
IgniteUI · Jul 16, 2019 · 71f0f57 · 71f0f57
1 parent 8f4af7b
commit 71f0f57
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -156,14 +156,28 @@
     </div>
 </div>
 
+<ng-template #defaultRowEditText>
+    You have {{ rowChangesCount }} changes in this row
+</ng-template>
+
+<ng-template #defaultRowEditActions>
+    <button igxButton igxRowEditTabStop (click)="endEdit(false, $event)">Cancel</button>
+    <button igxButton igxRowEditTabStop (click)="endEdit(true, $event)">Done</button>
+</ng-template>
+
 <ng-template #defaultRowEditTemplate>
     <div class="igx-banner__message">
-        <span class="igx-banner__text">You have {{ rowChangesCount }} changes in this row</span>
+        <span class="igx-banner__text">
+            <ng-container
+                *ngTemplateOutlet="rowEditText ? rowEditText : defaultRowEditText; context: { $implicit: rowChangesCount }">
+            </ng-container>
+        </span>
     </div>
     <div class="igx-banner__actions">
         <div class="igx-banner__row">
-            <button igxButton igxRowEditTabStop (click)="endEdit(false, $event)">Cancel</button>
-            <button igxButton igxRowEditTabStop (click)="endEdit(true, $event)">Done</button>
+            <ng-container
+                *ngTemplateOutlet="rowEditActions ? rowEditActions : defaultRowEditActions; context: { $implicit: endEdit.bind(this) }">
+            </ng-container>
         </div>
     </div>
 </ng-template>