Passing template to detailsViewSettings column from ts file by adding extra info to the template

[Mayko Estevez]

Hi, can you send me an example on how can I add a template with data column plus more data that I have in my ts file, the idea is  that I need to hide and show info in the column depending on a status field that is not part of the frid.

My current impementation is this:

HTML:

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

  <div class='empimg'><span>{{data.name}}</span></div>

  <div>{{moreData}}</div>

  </ng-template>

TS:

  @ViewChild('template')

  public template: any;

 public loadCellCommands() {

    const column = this.detailsViewSettings?.columns?.find(

      (c) => c.field == 'name',

    );

    if (column) column.template = this.template;

  }

RESULT

I'm getting this error in the console and file manager grid is blank just with teh columns, not row data:

file-management.component.html:8 [EJ2Grid.Warning]: INVALID FORMAT

For more information, refer to the following documentation links:

Number format: https://ej2.syncfusion.com/documentation//common/internationalization#supported-format-string

Date format: https://ej2.syncfusion.com/documentation//common/internationalization#manipulating-datetime

Message: TypeError: template_1.replace is not a function

[Saravanan Jayavel]

Hi Mayko Estevez

Based on your request to display additional data in a column template that conditionally shows or hides content based on a status field — we suggest using the initializeCSPTemplate method from the Syncfusion base package. This allows us to apply functional templates directly to the detailsViewSettings.columns in the FileManager component.

Refer the code snippet below.

 

constructor(private datePipe: DatePipe) {}

  public ngOnInit(): void {

    this.ajaxSettings = {

      url: this.hostUrl + 'api/FileManager/FileOperations',

      getImageUrl: this.hostUrl + 'api/FileManager/GetImage',

      uploadUrl: this.hostUrl + 'api/FileManager/Upload',

      downloadUrl: this.hostUrl + 'api/FileManager/Download',

    };

    this.view = 'Details';

    this.detailsViewSettings = {

      columns: [

        {

          field: 'name',

          headerText: 'File Name',

          minWidth: 120,

          width: 'auto',

          customAttributes: { class: 'e-fe-grid-name' },

          template: initializeCSPTemplate(function (data: any) {

            return this.customTemplate(data);

          }, this) as string | Function,

        },

        {

          field: 'size',

          headerText: 'File Size',

          minWidth: 50,

          width: '110',

          template: '${size}',

        },

      ],

    };

  }

 

public customTemplate(data: any): string | Function {

    if (data.isFile) {

      return `<span> ${data.name}</span>` as string;

    }

    return `

      <div style="line-height: 1.5;">

      <span style="font-size: 12px; color: #666;"><strong> ${data.name}</span></strong><br>

        <span style="font-size: 12px; color: #666;"> Created: ${data._fm_created}</span><br>

        <span style="font-size: 12px; color: #666;"> Modified: ${data._fm_modified}</span>

      </div>

    ` as string;

  }

 

For your reference we attached a sample.

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

Let us know if you need any further assistance.

Regards,

Saravanan J

[Mayko Estevez]

Thanks for your support.

I'm getting this error when using  initializeCSPTemplate.

core.mjs:7192 ERROR TypeError: Cannot set properties of undefined (setting 'CSPTemplate') at _FileManagementComponent.loadCellCommands (file-management.component.ts:203:36) at _FileManagementComponent.onFileManagerCreated (file-management.component.ts:246:12) at FileManagementComponent_Template_ejs_filemanager_created_4_listener (file-management.component.html:29:20)

Do I need any extra configuration?

[Saravanan Jayavel]

Hi Mayko Estevez,

The error you encountered (TypeError: Cannot set properties of undefined (setting 'CSPTemplate')) typically arises when initializeCSPTemplate is invoked using an arrow function that references a component method like this.customTemplate. Due to how this is scoped in arrow functions, the internal Syncfusion template engine may fail to bind correctly during setup.

To resolve this, we recommend using the following code snippet:

 

template: initializeCSPTemplate(function (data: any) {

            if (data.isFile) {

              return `<span> ${data.name}</span>` as string;

            }

            return `

              <div style="line-height: 1.5;">

              <span style="font-size: 12px; color: #666;"><strong> ${data.name}</span></strong><br>

                <span style="font-size: 12px; color: #666;"> Created: ${data._fm_created}</span><br>

                <span style="font-size: 12px; color: #666;"> Modified: ${data._fm_modified}</span>

              </div>

            ` as string;

          }, this) as any,

For your reference, we’ve attached a workable sample that demonstrates this implementation.

Sample: Attached as a zip file.

Let us know if you need any further assistance.

Regards,

Saravanan J

Attachment: sample_7c1380e6.zip