How to define template column in childGrid

[Matthieu]

Hello,

I didn't success to define a column template in a subgrid. I need to link to a template defined in HTML to bind click event to my component method. But when I define the template in my column, the grid display 'no dtata' instead of the desired rows.

Could you help me achieving the desired behavior please?

In my ts, I have something like:

...

@ViewChild('colTemplate') colTemplate: any;

...

this.timePlannerGrid = {

id: "timePlannerGrid",

dataSource: this.timePlannerData,

queryString: "tmpl_reference",

detailDataBound: this.trackExpandedRows.bind(this),

rowDataBound: this.initSubGridIndicator.bind(this),

allowSorting: true,

allowSelection: true,

selectionSettings: { type: 'Multiple' },

allowResizing: false,

allowTextWrap: true,

textWrapSettings: { wrapMode: "Header" },

allowFiltering: true,

filterSettings: { type: "Menu", ignoreAccent: true },

contextMenuItems: this.timePlannerContextMenuItems,

contextMenuClick: this.onTimePlannerMenuClick.bind(this),

rowSelected: this.onTimePlannerRowSelected.bind(this),

rowDeselected: this.onTimePlannerRowDeselected.bind(this),

columns: [

{ type: "checkbox", width: 50 },

{ field: "tmpl_timeplannerid", isPrimaryKey: true, visible: false },

{ headerText: this.translationService.getTranslation("reconciliation.columns.tmpl_name"), width: 120, template: this.colTemplate},

{ field: "tmpl_prodcode", headerText: this.translationService.getTranslation("reconciliation.columns.tmpl_prodcode"), width: 100, filter: { type: 'CheckBox' } },

{ field: "tmpl_comment", headerText: this.translationService.getTranslation("reconciliation.columns.tmpl_comment"), width: 70, clipMode: "EllipsisWithTooltip", allowSorting: false, allowFiltering: false },

{ field: "tmpl_natureqty", headerText: this.translationService.getTranslation("reconciliation.columns.tmpl_natureqty"), width: 60, foreignKeyField: "code", foreignKeyValue: "capt", dataSource: this.natureQteDS, allowFiltering: false, allowTextWrap: true },

{ field: "tmpl_initialqty", headerText: this.translationService.getTranslation("reconciliation.columns.tmpl_initialqty"), width: 50, allowFiltering: false },

{ field: "tmpl_erpqty", headerText: this.translationService.getTranslation("reconciliation.columns.tmpl_erpqty"), width: 50, allowFiltering: false },

{ field: "tmpl_currentqty", headerText: this.translationService.getTranslation("reconciliation.columns.tmpl_currentqty"), width: 50, allowFiltering: false },

{ field: "planifiedqty", headerText: this.translationService.getTranslation("reconciliation.columns.planifiedqty"), width: 50, allowFiltering: false },

{ field: "realizedqty", headerText: this.translationService.getTranslation("reconciliation.columns.realizedqty"), width: 50, allowFiltering: false },

{ field: "tovalidateqty", headerText: this.translationService.getTranslation("reconciliation.columns.tovalidateqty"), width: 50, allowFiltering: false },

{ field: "pointedoutqty", headerText: this.translationService.getTranslation("reconciliation.columns.pointedoutqty"), width: 50, allowFiltering: false }

]

};

And in my HTML:

<ng-template let-data #colTemplate>

<a rel='nofollow' href="" style="background-color: grey" (click)="showModale($event)">{{data.tmpl_name}}</a>

ng-template>

Thanks,

Regards,

Matt

[Rajapandiyan Settu]

Hi Matthieu,

Thanks for contacting Syncfusion support.

Query: I need to link to a template defined in HTML to bind click event to my component method. 

We have created a simple sample based on your requirement. Please find the below code example and sample for more information.

 

[app.component.html]

 

 

<ejs-grid #grid id="Grid" [dataSource]="parentData" [childGrid]="childGrid" [allowPaging]="true">

  <e-columns>

    <e-column field="EmployeeID" headerText="Employee ID" width="120" textAlign="Right"></e-column>

    <e-column field="FirstName" headerText="Name" width="140"></e-column>

    <e-column field="Title" headerText="Title" width="170"></e-column>

  </e-columns>

</ejs-grid>

 

<ng-template #childtemplate1 let-data>

  <div>

    <a rel='nofollow' href=“#” (click)="hyperclick($event)">{{data.ShipCity}}</a>

  </div>

</ng-template>

<ng-template #childtemplate2 let-data>

  <div>

    <a rel='nofollow' href=“#” (click)="hyperclick($event)">{{data.ShipName}}</a>

  </div>

</ng-template>

 

 

[app.component.ts]

 

 

export class AppComponent {

  constructor(

    @Inject(ViewContainerRef) private viewContainerRef?: ViewContainerRef

  ) {}

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

  public grid: GridComponent;

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

  public childtemplate1: any;

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

  public childtemplate2: any;

  public parentData: Object[];

  public childGrid: any;

  ngOnInit(): void {

    this.parentData = employeeData;

    this.childGrid = {

      dataSource: orderDatas,

      queryString: 'EmployeeID',

      allowPaging: true,

      pageSettings: { pageSize: 6, pageCount: 5 },

      load: function() {

        this.registeredTemplate = {}; //set registertemplate value as empty in load event

      },

      columns: [

        {

          field: 'OrderID',

          headerText: 'Order ID',

          textAlign: 'Right',

          width: 120

        },

        {

          field: 'ShipCity',

          headerText: 'Ship City',

          template: this.childtemplate1,

          width: 120

        },

        {

          field: 'ShipName',

          headerText: 'Ship Name',

          template: this.childtemplate2,

          width: 150

        }

      ]

    };

  }

  ngAfterViewInit() {

    this.childtemplate1.elementRef.nativeElement._viewContainerRef = this.viewContainerRef;

    this.childtemplate2.elementRef.nativeElement._viewContainerRef = this.viewContainerRef;

  }

 

  hyperclick(args) {

    console.log(this);

    console.log(args);

  }

}

 

 

sample: https://stackblitz.com/edit/angular-vdcepu-dtkmsx?file=app.component.html,app.component.ts

Please get back to us if you need further assistance.

Regards, 

Rajapandiyan S