how to pass current column data such as field, type, format to a Window Function template

[Ecaldima]

Hello,

In the EJ2 Grid, I would like to pass additional information about the current column (such as its field value) to a Window function used as a template.

Here is my test:

 window.TemplateTest = function (data,field) {

    return data .join(",") + ' ' +field ;

};

Column definition examples and issues encountered:

• Column definition: { "field": "MyColumn",template:"${ TemplateTest  (data,field)}"}

Issue: The data object contains the row data, but field is empty in the function.

• Column definition:  { "field": "MyColumn",template:"${ TemplateTest  (data,this.field)}"}

Error : 

[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: Cannot read properties of undefined (reading 'field')

wM.log @ ej2.min.js:1Understand this errorAI

• Column definition:  { "field": "MyColumn",template:"${ TemplateTest  (data,'MyColumn')}"}:
  

Error :

VM32:3 Uncaught SyntaxError: Unexpected string

    at new Function (<anonymous>)

    at zn (ej2.min.js:1:190177)

    at to.compile (ej2.min.js:1:193800)

    at Jn (ej2.min.js:1:192448)

    at EP (ej2.min.js:1:1665978)

    at new u0 (ej2.min.js:1:965497)

    at PP (ej2.min.js:1:1667116)

    at a.render (ej2.min.js:1:1548337)

    at Ui.appendTo (ej2.min.js:1:152445)



Question:
How can I pass the row data (data) along with the field value (or any other property of the column) to my custom TemplateTest function?

Thank you for your help!

[Rajapandi Ravi]

Hi Ecaldima,

Greetings from Syncfusion support

Based on your query it appears that you would like to pass the column information such as field, type to your window function. You can pass the column information to your window function by defining data and column argument in the template function definition to achieve your requirement.

Index.js

 

var grid = new ej.grids.Grid({

        dataSource: window.orderData,

        allowPaging: true,

        allowSorting: true,

        columns: [

            .  .  .  .  .  .  .  .  .  .

            .  .  .  .  .  .  .  .  .  .

            .  .  .  .  .  .  .  .  .  .

            { field: 'CustomerName', template: "${TemplateTest(data, column)}", headerText: 'Customer Name', width: 150 },

        ],

        pageSettings: { pageCount: 4, pageSizes: true }

    });

    grid.appendTo('#Grid');

 

    window.TemplateTest = function(data, column) {

        console.log('Type:', column.type); //here you can access the column information such as type

        console.log('Field:', column.field); //here you can access the column information such as field

        return data[column.field];

    }

 

 

Sample: https://stackblitz.com/edit/w49vg8fj-4g81jz1g?file=index.js

Screenshot:

Regards,

Rajapandi R