template from Column not working with stacked header

[Karthik]

let column: Column = {

            field: 'field1'

            headerText: 'field1'

            minWidth: 40,

            width: 85,

            maxWidth: 100,

            size: 'large',

            headerTextAlign: 'Center',

            textAlign: 'Right',

            visible,

            template:`<ng-template #template let-data>

                      <div>{{data.field1}}</div>

                      </ng-template>`

          };

columns.push( column);

i have multilvel stacked header so i am building using columns to have the columns in type scripts as mentioned above 

<e-column field='test' headerText='test1'

                textAlign='Center' [columns]="columns">

</e-column

how ever data is not getting rendered in the column instead having the data it is displaying {{data.field1}} every where,

could you please suggest here 

Note: am using multilevel stack header using columns where they are built in typescript and having template in some columns which uses some input controls

[Dineshnarasimman Muthu]

Hi Karthik,

Greetings from Syncfusion Support.

After reviewing your query we understand that you are facing issue in rendering column template while using stacked header in the grid. The requirement is achieved with template function of the grid with interpolation to render the data in the template. The code snippet and sample have been attached for your reference

this.orderColumns = [

      {

        field: 'OrderDate',

        headerText: 'Order Date',

        format: 'yMd',

        width: 130,

        textAlign: 'Right',

        minWidth: 10,

      },

      {

        field: 'Freight',

        headerText: 'Freight ($)',

        width: 120,

        format: 'C1',

        textAlign: 'Right',

        minWidth: 10,

        template: '<div><a>${Freight}</a></div> ',

      },

    ];

 

Sample: https://stackblitz.com/edit/angular-dlzjsq?file=src%2Fapp.component.ts

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman

[Karthik]

Hello, Thanks for the solution 

i tried 

this.orderColumns = [

      {

        field: 'OrderDate',

        headerText: 'Order Date',

        format: 'yMd',

        width: 130,

        textAlign: 'Right',

        minWidth: 10,

      },];

let templateCol =   'Freight';

      this.orderColumns.push( {

        field:  templateCol  ,

        headerText: 'Freight ($)',

        width: 120,

        format: 'C1',

        textAlign: 'Right',

        minWidth: 10,

        template: '<div><a>${'+ templateCol  +'}</a></div> ',

      })

  it is working fine in the sample that has been provided, however it is not working in my project throwing the below error.

i am using 17.4.43

[Dineshnarasimman Muthu]

Hi Karthick,

 

Upon careful validation, it appears that the issue you are encountering is specific to an older version of our product. To address and resolve this issue, we recommend upgrading to our latest version.

 

Regards,

Dineshnarasimman

[Karthik]

Hello ,

Is it possible to attach events for the input element present in the column template

[Dineshnarasimman Muthu]

Hi Karthik Nani,

We have reviewed your query and understood that you need to bind the event to element present in the column.template. We have attached the code snippet and sample of the implementation of binding the event to the element present in the column.template in the stacked header for your reference.

<ng-template id="freight" #freight let-data>

  <input

    type="text"

    value="{{ data.Freight }}"

    (keyup)="keyup($event, data)"

  />

</ng-template>

 

 

[app.component.ts]

 

  ngAfterViewInit() {

    this.orderColumns[1].template = this.templates;

  }

  keyup(args, data) {

    // event triggers

    console.log(data);

  }

 

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

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman M