Change name for built in toolbar in childdatagrid in vue

[Shivani]

Hello,
I wanted to change the name in built-in toolbar in the child data grid in Vue.

I try to add like this but doesn't work.

Please guide me and if possible then share an example.

[Sujith Kumar Rajkumar]

Hi Shivani, 

 

Greetings from Syncfusion support. 

 

You can achieve your requirement of changing the default toolbar item text for child Grid alone by modifying the corresponding toolbar item’s text property value of the child Grid’s toolbar module in the parent Grid’s detailDataBound(triggers after initial detail row expand) event handler. 

 

This is demonstrated in the below code snippet, 

 

// Grid’s detailDataBound event handler 

onDetailDataBound(args) { 

   args.childGrid.toolbarModule.toolbar.items.forEach( item => {  

       // Change the toolbar text for the required Grid toolbar item 

       if(item.text === "Add")  

          item.text = "Add record"; 

  }); 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167580/ze/GridWithToolbar-1855877425 

 

API link: https://ej2.syncfusion.com/vue/documentation/api/grid/#detaildatabound 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Shivani]

Thank you so much for your quick reply. It really helps me

[Sujith Kumar Rajkumar]

Hi Shivani, 

 

You’re welcome. We are glad to hear that your query has been resolved. 

 

Regards, 

Sujith R