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
