Data Grid column template not rendering in React

[YazanKhatib]

I'm using column templates to render user active status in different colors and to display resources actions ( show, edit, delete ) as icons.
It's displayed just fine at the first render but when clicking again on the same menu tab the column templates fields disappear until refreshing the page again.

When Debugging the issue I found that the template is passed sometimes as undefined for some reason.
I made the grid a generic component and this is how I'm passing the required properties.

    const statusTemplate = (props: any) => {
        return props.status === 'active' ? (
            <div className="rounded-md bg-green-400 p-3 text-center text-white">Active</div>
        ) : (
            <div className="rounded-md bg-red-500 p-3 text-center text-white">Inactive</div>
        );
    };

    const columns = [
        { field: 'firstName', header: 'Firstname', width: '30' },
        { field: 'lastName', header: 'Lastname', width: '30' },
        { field: 'email', header: 'Email', width: '60' },
        { field: 'username', header: 'Username', width: '40' },
        { field: 'phoneNumber', header: 'Phone Number', width: '40' },
        { field: 'status', header: 'Status', width: '30', template: statusTemplate },
    ];

This is the Grid Generic Component

    const actionTemplate = (props: any): any => {
        return (
            <div>
                {show && (
                    <button className="mr-4" onClick={(e) => handleShow(props)}>
                        <FontAwesomeIcon size="lg" icon={faEye} />
                    </button>
                )}

                {edit && (
                    <button className="mr-4" onClick={(e) => handleEdit(props)}>
                        <FontAwesomeIcon size="lg" icon={faEdit} />
                    </button>
                )}

                {del && (
                    <button onClick={(e) => handleDelete(props)}>
                        <FontAwesomeIcon size="lg" icon={faTrashCan} />
                    </button>
                )}
            </div>
        );
    };

    return (
         <div>
            <GridComponent
                rowHeight={60}
                ref={gridRef}
                dataSource={data}
                allowPaging={true}
                allowSorting={true}
                allowFiltering={true}
                editSettings={editOptions}
                allowExcelExport={true}
                allowPdfExport={true}
                toolbar={toolbarOptions}
                toolbarClick={toolbarClick}
            >
                <ColumnsDirective>
                    {columns?.map(({ field, header, width, template }: any, key: number) => (
                        <ColumnDirective
                            key={key}
                            field={field}
                            headerText={header}
                            width={width}
                            template={template}
                        />
                    ))}

                    {(edit || show || del) && (
                        <ColumnDirective
                            field=""
                            width={40}
                            textAlign="Right"
                            headerText="Actions"
                            template={actionTemplate}
                        />
                    )}
                </ColumnsDirective>
                <Inject services={[Page, Sort, Filter, Toolbar, ExcelExport]} />
            </GridComponent>
        </div>
);

[NithyaSivaprakasam]

Hi YazanKhatib,

Greetings from Syncfusion support.

We have validated the reported problem with provided code example(using a column template to render user active status in different colors and displaying the resource actions(show, delete, edit) as icons). Then, we tried to replicate your reported problem at our end, but it is working fine. We have shared a sample for your reference below,

Sample: https://stackblitz.com/edit/react-1ywaof?file=index.js

If the reported issue still persists then kindly share the below details to validate further at our end.

1. Please share the complete grid rendering code.
2. Share the replication procedure for the reported problem.
3. Kindly share the video demonstration of the reported problem.
4. Kindly share the package version of the syncfusion you have been using.
5. If possible, please share the issue reproducible sample.

Regards,
Nithya Sivaprakasam.

[YazanKhatib]

@NithyaSivaprakasam Hi Thanks for your response

• I'm using Syncfusion version 20.2.39
• I'll share a video explaining what's happening before providing the rest of the requirements video

[NithyaSivaprakasam]

Hi YazanKhatib,

Thanks for the update.

By checking your video demo, we suspect that the grid is partially rendering. So, before we start providing a solution to your query, we need more information for clarification. Please share the below details that will be very helpful for us to validate further at our end.

1. Kindly share that when you click the navigation bar, the Grid is either rendering again or displaying the already rendered grid.
2. Please share that you have used any state properties to render the grid when switching on the tab.
3. Please share the complete code for that action.
4. If possible, Kindly share the issue reproducible sample.

The above-requested details will be very helpful for us to provide a better solution as soon as possible.

Regards,
Nithya Sivaprakasam.

[syncsiva]

This issue has not had any activity for a month. Closing for housekeeping purposes. Please feel free to reopen it if you have more information that can help us investigate the issue further.