)
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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to render TreeGrid inside tab or hidden element

Platform: jQuery |
Control: ejTreeGrid |
Published Date: September 22, 2017 |
Last Revised Date: May 29, 2019

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.

JS

<body>
    <div id="defaultTab">
        <ul>
            <li><a href="#Tab1">Chart</a></li>
            <li><a href="#Tab2">TreeGrid</a></li>
        </ul>
        <div id="Tab1">
            <div>
                <div id="chart"></div>
            </div>
        </div>
        <div id="Tab2">
            <div>
                <div id="treegrid"></div>
            </div>
        </div>
    </div>
<script type="text/javascript">
        $(function () {
    
            $("#defaultTab").ejTab({
                itemActive: "beforeActive"
            });
            
            $("#chart").ejChart();
 
         var dateFormat = "{0:" +   ej.preferredCulture()["calendars"]["standard"]["patterns"]["d"] + "}";
 
             $("#treegrid").ejTreeGrid({
                dataSource: sampleData,
                childMapping: "subtasks",
                treeColumnIndex: 1,
                isResponsive: true,
                columns: [
                    { field: "taskID", headerText: "Task Id" },
                    { field: "taskName", headerText: "Task Name" },
                    { field: "startDate", headerText: "Start Date", format: dateFormat        },
                    { field: "endDate", headerText: "End Date", format: dateFormat },
                    { field: "duration", headerText: "Duration" },
                    { field: "progress", headerText: "Progress" }
                ]
            });
        });
 
//Method to refresh the TreeGrid size while the control changes from hidden state to visible state.
        function beforeActive(args) {
            if (args.activeIndex == 1) {
                var treeGridObj = $("#treegrid").data("ejTreeGrid"),
                    sizeSettings = {
                        width: "100%"
                    };
                if (treeGridObj)
                    treeGridObj.option("sizeSettings", sizeSettings);
            }
        }
    </script>
</body>

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

Sample

ADD COMMENT
You must log in to leave a comment
Comments
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

Reply
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.

 

Thanks,

Manikandan M.

Please sign in to access our KB

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

Up arrow icon

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

Live Chat Icon For mobile
Live Chat Icon