No column template support for the ej2 grid (Angular)

[Paul Kocher]

Hi!

I've checked the documentation but haven't found any way to use a column template with the grid.

I used the old ej1 grid and had no problem using a template like this:

<script type="text/x-jsrender" id="columnTemplate">

{{if Aktiv }}

{{/if}}

{{if !Aktiv }}

{{/if}}

script>

In my data I have a bool which shows if the specific person is active/inactive. And I'd like to replace the default checkbox with a glyphicon based on the person being active/inactive.

Am I missing something or is this unsupported?

[Pavithra Subramaniyam]

Hi Paul, 

We have checked your query and you can achieve your requirement by using “ng-template” to render template in required column and “ngIf’ to check the condition. We have prepared a simple sample based on your requirement . Please refer to the code example and sample link. 

@Component({ 

    selector: 'app-container', 

    template: `<ej-grid [dataSource]='data'> 

    <e-columns> 

    <e-column field='OrderID' headerText='Order ID' textAlign='right' width=120></e-column> 

    <e-column field='Persion' headerText='Persion State' width=140> 

    <ng-template #template let-data> 

    <div *ngIf="data.Persion"> 

      <input type='checkbox' checked /> 

    </div> 

    <div *ngIf="!data.Persion"> 

        <span class="glyphicon glyphicon-unchecked"></span> 

    </div> 

    </ng-template> 

    </e-column> 

    .     .    . 

    </e-columns> 

    </ej-grid>` 

}) 

export class AppComponent implements OnInit { 

    public data: Object[]; 

    ngOnInit(): void { 

        this.data = [ 

            { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5,Persion:true }, 

            { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6,Persion:false} 

            .    .   . 

]; 

    } 

} 

Sample Link: http://plnkr.co/edit/5Rmbxrz8gqGtMURniAKB?p=preview 

Demo Link   : http://ej2.syncfusion.com/15.4.23/angular/demos/#/material/grid/columntemplate  

Reference Link: https://www.npmjs.com/package/ng-template  

                            https://angular.io/guide/structural-directives  

Regards, 

Pavithra S. 

[Paul Kocher]

Aaah nice. Thanks Pavithra :)

[Pavithra Subramaniyam]

Hi Paul,

Thanks for your update.

Please contact us if you have any queries.

Regards,
Pavithra S.