Category / Section
How to render Treegrid column template in angular
1 min read
It is possible to customize the TreeGrid column using column template support. We can use JsRender template or ng-template to render customized column. To enable column template support, set “isTemplateColumn” property as true. Preferably ng-template is used in angular application.
Please refer following code snippet for ng template,
//app.html <e-treegrid-columns> <e-treegrid-column field="Name" headerText="Name" [isTemplateColumn]="true"> <ng-template e-template let-data> <div style='height:20px;' unselectable='on'> <div *ngIf="data.hasChildRecords==true"> <div class='intend' [ngStyle]="{height:'2px', float:'left',display:'inline-block', width: data.level*20 + 'px'}"></div> </div> <div *ngIf="data.hasChildRecords==false"> <div class='intend' [ngStyle]="{height:'2px', float:'left',display:'inline-block', width: data.level*20 + 24 + 'px'}"></div> </div> <div *ngIf="data.hasChildRecords==true && data.expanded==true"> <div class='e-treegridexpand e-icon' style=' margin-top: 4px;float:left;display:inline-block;' unselectable='on'></div> </div> <div *ngIf="data.hasChildRecords==true && data.expanded==false"> <div class='e-treegridcollapse e-icon ' style=' margin-top: 4px;float:left;display:inline-block;' unselectable='on'></div> </div> <div *ngIf="data.hasChildRecords==false "> <div class='e-doc e-icon' style=' margin-top: 4px;float:left;display:inline-block;' unselectable='on'></div> </div> <div *ngIf="data.Name"> <div class='e-cell' style='display:inline-block;width:100%;margin-left:5px;' unselectable='on'>{{data.Name}}</div> </div> </div> </ng-template> </e-treegrid-column> </e-treegrid-columns>
//app.css .e-treegrid .e-treegridexpand { background-image: url(./../assets/treegrid/folder-open.png); background-repeat: no-repeat; width: 14px; height: 14px; } .e-treegrid .e-treegridcollapse { background-image: url(./../assets/treegrid/Folder.png); background-repeat: no-repeat; width: 14px; height: 14px; } .e-treegrid .e-doc { background-image: url(./../assets/treegrid/Document.png); background-repeat: no-repeat; width: 14px; height: 14px; } .e-treegrid .e-treegridexpand:before { content: none; } .e-treegrid .e-treegridcollapse:before { content: none; } .e-treegrid .e-treegridcollapse:after, .e-treegrid .e-treegridexpand:after { opacity: 0; }
A simple sample to render column template using ng-template is available here