ColumnDirective is not working correctly with a template.

I have a very simple example of how to use a template in a ColumnDirective, but the column doesn't work; it always remains empty. What could be happening, and how can I fix it?

```

import React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { GridColumnDirTypecast } from '@syncfusion/ej2-react-grids';

const GridComponentCustom: React.FC = () => {
    const data = [
        { id: 1, name: 'John Doe', age: 28 },
        { id: 2, name: 'Jane Smith', age: 34 },
    ];

    const cellTemplate = (props: any) => {
        return (
            <div style={{ color: 'blue' }}>
                {props.name} ({props.age} años)
            </div>
        );
    };

    return (
        <GridComponent dataSource={data}>
            <ColumnsDirective>
                <ColumnDirective field='id' headerText='ID' width='100' textAlign='Right' />
                <ColumnDirective field='name' headerText='Name' width='200' />
                <ColumnDirective
                    field='age'
                    headerText='Age'
                    width='100'
                    textAlign='Right'
                    template={cellTemplate as GridColumnDirTypecast['template']}
                />
            </ColumnsDirective>
        </GridComponent>
    );
};

export default GridComponentCustom;

```
result:
Image_1637_1723579013644


1 Reply

AR Aishwarya Rameshbabu Syncfusion Team August 14, 2024 09:52 AM UTC

Hi Carlos Huallpa,


Greetings from Syncfusion support.


Upon reviewing your inquiry, we have observed that you are encountering an issue with the rendering of templates in Syncfusion Grid. To address this, we have developed a basic sample based on the provided code example. However, we were unable to replicate the reported issue. Kindly refer to the sample and screenshot below, which demonstrate the proper rendering of templates for the Age column.


Sample: React Grid TSX Sample (forked) - StackBlitz


Screenshot:


If you are still encountering any issues, please provide the version of the Syncfusion package you are currently using and attempt to replicate the issue in the shared sample.



Regards

Aishwarya R


Loader.
Up arrow icon