"No records to display" message can't be customized in TreeGridComponent

[Daniel Gavin]

Hello,
I need to update the "No records to display" message to be text of my choice. In the GridComponent, there is an option to pass in a custom emptyRecordTemplate. I'm wondering why this option does not exist for the TreeGridComponent. I tried this solution, but it is causing issues on re-render:

dataBound={() => {

if (!tableData.length) {

const emptyRow =

treeGridRef?.element?.querySelector('.e-emptyrow');

if (emptyRow) {

emptyRow.innerHTML = `

<div style="text-align: center; padding: 20px;">

<span>No records matching your selected filter criteria exist.</span>

<br/><br/>

<span>Please clear your filters or try adjusting your search criteria.</span>

</div>

`;

}

}

}}

Is it possible to add the emptyRecordTemplate prop to the TreeGridComponent?

Thank you,
Daniel

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Hi Daniel,

Greetings from Syncfusion Support!

The TreeGrid component currently does not include a built-in emptyRecordTemplate property like the Grid component. However, you can achieve similar functionality by dynamically customizing the empty record template using either localization or by modifying the empty record template in the TreeGrid's load event.

Suggested Solution:

To display a customized empty record template before the data loads, you can implement it by setting the template in load event of treegrid.

Refer the below code snippet:

//Load event 

function load() { 
    var instance = document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];
                  
 instance.grid.emptyRecordTemplate = '#emptytemplate'; //update     emptyrecord template
 } 


//HTML and CSS for the  Empty Record Template:
 
 .emptyRecordTemplate { 
        text-align: center;  
  }    
  .e-emptyRecord {   
     display: block;     
   margin: 10px auto;   
 } 
</style>

 <script id="emptytemplate" type="text/x-template">  
  <div class='emptyRecordTemplate'>  
     
 <img src="emptyRecordTemplate.svg" class="e-emptyRecord" alt="No record">    
 
 <span>There is no data available to display at the moment.</span> 

    </div> 
</script>


Please make sure to use the id="emptytemplate" in the <script> tag in your index.js file as shown above.      

This logic can be seamlessly integrated into your application's lifecycle to dynamically update the empty record template as needed.

We’ve prepared a sample for your reference: StackBlitz Sample

Please review the sample, and let us know if you have any further questions or need additional assistance.

Best regards,
Sreedhar Kumar.