Hi Garima
Jain,
Greetings
from Syncfusion Support.
As per your
request, we have created a sample that demonstrates how to dynamically set the
“emptyRecordTemplate”
for child Grids. This functionality is achieved using the “detailDataBound”
event of the parent Grid, which is triggered each time a child Grid is
rendered. Please refer to the following code snippet and sample link:
|
[index.js]
const detailDataBound = (args) => {
const emptyRecordTemplate = `
<div className='emptyRecordTemplate' style="text-align: center;">
<span>No orders placed by Employee <b>${args.data.FirstName}</b></span>
</div>
`;
args.childGrid.emptyRecordTemplate = emptyRecordTemplate;
};
return (
<div className="control-pane">
<div className="control-section">
<GridComponent
ref={(g) => (grid = g)}
dataSource={employeeData}
childGrid={childGrid}
allowSorting={true}
allowFiltering={true}
filterSettings={filterSettings}
detailDataBound={detailDataBound}
dataBound={dataBound}
>
.
. . . .
|
Sample: https://stackblitz.com/edit/react-pjbs1ctg-phrazdu7
In this
sample, the emptyRecordTemplate is dynamically configured to display the
respective employee’s first name with the empty record message.
We hope this
solution meets your requirement. Please let us know if you need any further
assistance.
Regards,
Santhosh I
