DataGrid Column Template Doesnt Work

[Tuan Ngueyn]

In Angular, Datagrid, Column Template Doesnt work. Not sure if it happen only in ejs-dialog, 

This is the result without the Column Template. 

<ejs-dialog

  id="dialog"

  #dialog

  [showCloseIcon]="true"

  [allowDragging]="true"

  [visible]="false"

  [isModal]="true"

  width="700px"

>

  <ng-template #header>

    <p class="font-semibold leading-normal">Workflow Templates Management</p>

  </ng-template>

  <ng-template #content>

    <ejs-grid

      [dataSource]="data"

      [selectionSettings]="{ mode: 'Row', type: 'Single' }"

      (rowSelected)="onRowSelected($event)"

    >

      <e-columns>

        <e-column

          field="ID"

          headerText="ID"

          textAlign="Center"

          width="50"

        ></e-column>

        <e-column

          field="TemplateName"

          headerText="Template Name"

          textAlign="Left"

          width="150"

        ></e-column>

        <e-column

          field="CreatedDate"

          headerText="Created Date"

          format="yMd"

          width="200"

        ></e-column>

        <e-column

          field="CreatedBy"

          headerText="Created By"

          width="100"

        ></e-column>

        <e-column headerText="Action" width="120">

          <!-- <ng-template #template let-data>

            <button>Delete</button>

          </ng-template> -->

        </e-column>

      </e-columns>

    </ejs-grid>

  </ng-template>

  <ng-template #footerTemplate>

    <div class="flex flex-row justify-end gap-2">

      <button

        ejs-button

        cssClass="w-1/2 sm:w-fit !ml-0"

        content="Cancel"

        type="button"

        (click)="onCancel()"

      ></button>

      <button

        *ngIf="mode() === 'Select'"

        ejs-button

        cssClass="e-primary w-1/2 sm:w-fit"

        content="Select"

        type="button"

        [disabled]="taskWorkflowTemplateModel == null"

        (click)="onSubmit()"

      ></button>

    </div>

  </ng-template>

</ejs-dialog>

When I add, it the data grid doesnt load anymore.

<e-column headerText="Action" width="120">

          <ng-template #template let-data>

            <button>Delete</button>

          </ng-template>

        </e-column>

 Console show this error
This is the main code

import { Component, signal, ViewChild } from "@angular/core";

import { TaskManagementService } from "@modules/task-management/task-management.service";

import { TaskWorkflowTemplateModel } from "@shared/models/task-management/taskWorkflow/TaskWorkflowTemplateModel";

import { RowSelectEventArgs } from "@syncfusion/ej2-angular-grids";

import { DialogComponent } from "@syncfusion/ej2-angular-popups";

@Component({

  selector: "app-workflow-template-management",

  templateUrl: "./workflow-template-management.component.html",

  styleUrl: "./workflow-template-management.component.css",

})

export class WorkflowTemplateManagementComponent {

  @ViewChild("dialog") dialog: DialogComponent;

  mode = signal<"View" | "Select">("Select");

  // public readonly save = output<TaskWorkflowTemplateModel>();

  taskWorkflowTemplateModel: TaskWorkflowTemplateModel;

  private _resolver:

    | ((value: TaskWorkflowTemplateModel | null) => void)

    | null = null;

  // Keep reference to the resolver function

  data: TaskWorkflowTemplateModel[] = [{

        ID : 1,

        TemplateName : "",

        CreatedDate: new Date(),

        CreatedBy: "Doctor",

      } as TaskWorkflowTemplateModel];

  constructor(private taskManagementService: TaskManagementService) {}

  ngOnInit(): void {}

  open(): Promise<TaskWorkflowTemplateModel | null> {

    this.dialog.show();

    // this.loadTemplateList();

    // Return a Promise that will resolve when user submits or closes

    return new Promise((resolve) => {

      this._resolver = resolve;

    });

  }

  async loadTemplateList() {

    this.data = (await this.taskManagementService

      .GetTaskWorkflowTemplateList()

      .toPromise()) as TaskWorkflowTemplateModel[];

  }

  onRowSelected(args: RowSelectEventArgs): void {

    this.taskWorkflowTemplateModel = args.data as TaskWorkflowTemplateModel;

  }

  onSubmit() {

    this.dialog.hide();

    this._resolver?.(this.taskWorkflowTemplateModel);

    this._resolver = null;

  }

  loadTemplate(template: TaskWorkflowTemplateModel) {

    this.taskWorkflowTemplateModel = template;

    this.dialog.hide();

    this._resolver?.(this.taskWorkflowTemplateModel);

    this._resolver = null;

  }

  deleteTemplate(template: TaskWorkflowTemplateModel) {

    console.log(template);

  }

  onCancel() {

    this.dialog.hide();

    this._resolver?.(null);

    this._resolver = null;

  }

}

[Joseph Christ Nithin Issack]

Hi Tuan Ngueyn,

Greetings from Syncfusion support.

Based on your query, you are trying to render the column template in the grid, while the grid itself is rendered in the dialog component. But you are facing a script error and the  grid is not rendering. We have prepared a sample using the details provided but we were not able to reproduce the issue you are facing.

Kindly check the sample and screenshot for your reference,

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

Screenshot:
 

IF you still face the issue, kindly share the below details for further validation.

• Are you facing the issue while performing any action in the grid? If yes, share the steps to reproduce the issue you are facing.
• Share an issue reproducing sample or reproduce the issue in the sample provided.
• Syncfusion package version you are using.

Regards,

Joseph I.

[Tuan Ngueyn]

Hi Joseph,

Here is the package list i use,

 "@angular-builders/custom-webpack": "^17.0.2",

    "@angular/animations": "^17.2.3",

    "@angular/cdk": "^17.2.1",

    "@angular/common": "^17.2.3",

    "@angular/compiler": "^17.2.3",

    "@angular/core": "^17.2.3",

    "@angular/forms": "^17.2.3",

    "@angular/localize": "^17.2.3",

    "@angular/material": "~17.3.10",

    "@angular/platform-browser": "^17.2.3",

    "@angular/platform-browser-dynamic": "^17.2.3",

    "@angular/router": "^17.2.3",

    "@syncfusion/ej2-angular-buttons": "^31.1.12",

    "@syncfusion/ej2-angular-calendars": "^31.1.23",

    "@syncfusion/ej2-angular-diagrams": "^31.2.12",

    "@syncfusion/ej2-angular-dropdowns": "^31.1.22",

    "@syncfusion/ej2-angular-grids": "^31.2.16",

    "@syncfusion/ej2-grids": "31.2.16",

    "@syncfusion/ej2-angular-inplace-editor": "^31.1.17",

    "@syncfusion/ej2-angular-inputs": "^31.2.12",

    "@syncfusion/ej2-angular-layouts": "^33.2.12",

    "@syncfusion/ej2-angular-lists": "^31.2.2",

    "@syncfusion/ej2-angular-navigations": "^31.2.12",

    "@syncfusion/ej2-angular-notifications": "^31.2.12",

    "@syncfusion/ej2-angular-popups": "^30.2.4",

    "@syncfusion/ej2-angular-splitbuttons": "^31.2.2",

So clearly, the dialog is not an issue. 
Here is the message log

at Grid.getContent, it fail at getPanel. This issue happen in the library.  is there a way to troubleshoot further?

[Tuan Ngueyn]

Nevermind, after delete the @syncfusion folder in node_module, and reinstall, it fixed the issue. Apparently, my ej2-base or ej2-angular-base still in version 29. 

[Joseph Christ Nithin Issack]

Hi Tuan,

We are glad that the issue has been resolved after removing the duplicate packages. Please get back to us if you need further assistance.