Display custom component in grid template

[Nick Dziura]

I'm currently trying to display a custom component in an ejs-grid,

My code is here: https://stackblitz.com/edit/angular-hlndpc-dmfmpj?file=src/app.component.html

I am inputting the template as follows:

ngOnInit(): void {

console.log('hello');

this.items = [];

this.items.push({

textValue: 'Hello World',

});

this.columns = [];

this.columns.push({

field: 'textValue',

template: '',

});

}



Where the icon component is simply:

<div>Hello Worlddiv>



I am then adding the template to the grid as follows:

<div style="padding: 8px">
  <ejs-grid #grid [dataSource]="items">
    <e-columns>
      <ng-template ngFor let-column [ngForOf]="columns">
        <e-column
          [field]="column.field"
          [template]="column.template"
        >e-column>
      ng-template>
    e-columns>
  ejs-grid>
div>

However, the cells display nothing. Passing the template as follows works, but I would like to be able to pass in my own components, thanks.

<div>Hello World</div>

[Santhosh Iruthayaraj]

Hi Nick,

We have reviewed your query and understand that you need to render custom components using column template for dynamically generated columns. We have prepared a code snippet that should help you achieve your requirement.

Please refer to the code snippet below:

[app.component.html]

 

<div style="padding: 8px">

  <ejs-grid #grid [dataSource]="items" (dataBound)='dataBound()'>

    .  .  .  .  .

  </ejs-grid>

  <ng-template let-data #template>

    <div>

      <!-- property value from ts file -->

      {{ templateValue }}

    </div>

    <div>

      <!-- field value -->

      {{ data.textValue }}

    </div>

  </ng-template>

</div>

 

 

 

import {

  .  .  .  .  . ,

  templateCompiler

} from '@syncfusion/ej2-angular-grids';

 

 

export class AppComponent {

  .  .  .  .  .

  @ViewChild('template') public template: any;

  initialRender: boolean = true;

  templateValue: string = "Template Text";

 

  dataBound() {

    if(this.initialRender) {

      this.initialRender = false;

      this.grid.columns[0].template = this.template;

      this.grid.columns[0].templateFn = templateCompiler(this.template);

      this.grid.refreshColumns();

    }

  }

}

 

We have modified your sample using the above code snippet.

Sample: https://stackblitz.com/edit/angular-hlndpc-krpwmz?file=src%2Fapp.component.ts,src%2Fapp.component.html

Please let us know if you have any further queries or concerns.

Regards,

Santhosh I