We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render TreeGrid inside tab or hidden element

When we render the TreeGrid inside the hidden element, TreeGrid control’s height and width was not get update properly due to the existence of scroll bar. We need to refresh its height/width while making the TreeGrid container as visible.


A sample was prepared and rendered the TreeGrid inside the hidden tab.

The following code explains, how to render the TreeGrid inside Tab control.


A sample to render TreeGrid inside tab control was available in the following link,



Article ID: Published Date: Last Revised Date: Platform: Control:
8002 09/22/2017 09/22/2017 JavaScript ejTreeGrid
Did you find this information helpful?
Ariel Sanchez Jun 15, 2018

Hi, thanks for the answer.

The sample works but it's different to my case. My problem with treegrid's scrrollbar is when these is inside a grid details.. the problem isn't for the tab control.

Try to put the treegrid inside row details, and then inside a tab control, and that will be the same case.

Can you help me to solve this, please?

Thanks in advance

Manikandan Manikam [Syncfusion] Jun 18, 2018

Hi Ariel,

We have checked the reported issue with grid details template sample. In this sample, we have replaced ejGrid by ejTreeGrid control in detail template and we have also faced the reported error. This issue was occurred due to TreeGrid control container’s width and height values are changed while rendering ejTab control, because TreeGrid control was initialized before rendering the tab control. And tab control was rendered with selectedItemIndex as 1, so itemActive event also not triggered while rendering TreeGrid and Tab control on expanding the details view. This issue can be resolved by initializing the TreeGrid control after rendering the Tab control. We have modified the Grid details template sample based on your requirement, please find the sample link below.

Sample link – http://jsplayground.syncfusion.com/jbnocnzv

In above sample TreeGrid control was rendered inside the active tab, please refer below sample link to render TreeGrid control inside the non-active tab.

Sample link – http://jsplayground.syncfusion.com/qz5py2rb

While rendering the TreeGrid in non-active tab, we have to update the sizeSettings value of TreeGrid in itemActive event of tab control to resolve this alignment issue.


Please let us know if you require further assistance on this.



Manikandan M.

Add Comment
You must log in to leave a comment

Please sign in to access our KB

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon