How to customize template for field in StackedColumn?

[Bryan]

I tried to specify custom template for stacked column in TreeGrid but it's not working as expected.

# report.component.ts

constructor() {
  this.nameColumns = [
    { field: 'code', headerText: 'Code', width: 100 },
    { field: 'name', headerText: 'Name', template: '#name_template'},
  ];
}

# report.component.html

<ejs-treegrid [dataSource]="dataset$ | async">
  <e-columns>
    <e-column headerText="" [columns]="nameColumns">
      <ng-template id="name_template" #template let-data>
        <a [rel='nofollow' href]="routeLedger(data.id) | async" (click)="navigate($event, data.id)">{{ data.name }}</a>
      </ng-template>
    </e-column>
    <e-column field="debit" headerText="Debit (RM)"></e-column>
    <e-column field="credit" headerText="Credit (RM)"></e-column>
  </e-columns>
</ejs-treegrid>

Result:

[Farveen Sulthana Thameeztheen Basha]

Hi Bryan,

Query#:- I tried to specify custom template for stacked column in TreeGrid but it's not working as expected.

We have prepared sample as per your code and we are able to replicate the problem at our end. To overcome this we suggest to define the template as like below

Refer to the code below:-

App.Component.html:-

 

<ejs-treegrid

    #treegrid

    [dataSource]="data"

    childMapping="subtasks"

    height="350"

    [treeColumnIndex]="1"

    [allowPaging]="true"

  >

    <e-columns>

      <e-column headerText="Order Details" [columns]="orderColumns">

        <ng-template #template let-data>

          <a rel="nofollow" rel='nofollow' href="#">{{ data.orderID }}</a>

        </ng-template>

      </e-column>

      <e-column

        headerText="Shipment Details"

        [columns]="shipColumns"

      ></e-column>

      <e-column headerText="Price Details" [columns]="priceColumns"></e-column>

    </e-columns>

  </ejs-treegrid>

 

App.Component.ts:-

 

 

@ViewChild('template', { static: true })

  public template: any;

  ngOnInit(): void {

    this.data = stackedData;

    this.orderColumns = [

      {

        field: 'orderID',

        headerText: 'Order ID',

        textAlign: 'Right',

        width: 90,

      },

      {

        field: 'orderName',

        headerText: 'Order Name',

        textAlign: 'Left',

        width: 180,

        template: this.template,

      },

    ];

      .   . 

];

Modified Sample link:- https://stackblitz.com/edit/angular-pst1fm-td22c4?file=app.component.html,app.component.ts,index.html

Please share details if the above solution doesn’t meet your requirement.

Regards,
Farveen sulthana T