Update no record template dynamically in hierarchical grid

[Garima Jain]

Hello
i want a working solution of updating dynamically no record template of a child grid

[Santhosh Iruthayaraj]

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

[Garima Jain]

Hello  i have attached my code & this is not working for child grid

Attachment: child_grid_b661f1c3.txt

[Santhosh Iruthayaraj]

Hi Garima Jain,

We have created a sample that closely aligns with the code structure you provided and have tested the dynamic empty row setup. Based on our validation, the behavior is working as expected. For your reference, please find the sample and a vide demonstration attached below:

Sample: https://stackblitz.com/edit/react-pjbs1ctg-y6kbsy3z

However, we understand that the reported issue occurs on your end. Since we are unable to reproduce the issue on our end, we kindly request you to either reproduce the issue using the provided sample within your application context or share a runnable sample that replicates the problem. This will allow us to validate the scenario more accurately and provide a targeted resolution.

Regards,

Santhosh I

Attachment: dynamicemptyrecordtemplate.mp4_902d76ac.zip