Tree Normally Sized Properly

[George SParticipant]

I have a set of tabs/pages on a tab control. Tabs 1 and 2 are very similar…
The left side has a single jqxtree, then a splitter, then the right side displays some data. Tab 1 always works/displays properly, Tab 2 has an oddity. The oddity is that the tree on the left side NORMALLY does not take up the full area (i.e. while height and width are set to 100%, it does not display this way). On rare occasion it does, and I don’t know why this is intermittent. What happens most of the time is that the tree, which has the correct data in it, displays in the upper left corner of the parent DIV, and is about 25% of the height and width of the parent DIV. I want it to completely take up the full DIV.

Once displayed, I can do several things to cause the jqxtree to properly display. I can manually click on the splitter, I can move the splitter, or I can change the size of the browser window. Any of these will cause the tree to become full size like it should.

If I switch tab orders (Tab page 1 and 2 around), then my problem tab seems to work fine. Unfortunately, this is not the flow of the business process. I need to keep them in the order which is causing my problem.

Since I can manually move the splitter to cause the tree to refresh, I tried doing this programmatically. I tied into the tab changed event, and do BOTH a jqxtree refresh as well as a splitter refresh. This does NOT help. I have tried doing this immediately (within the tab change event), I have also tried doing this from within the tab change event, but after a delay, thinking that there might be some type of timing issue. I am at a loss of what else to try. Here are the applicable portions of the code…

//{CREATE TAB PAGE 2}
//Left Side is DIV with JQXTREE
//Center is SPLITTER
//Right side is TAB control with 6 tabs

<div id='AnalysisBodyAll'>
<div id='AnalysisBodyLeftParent' style = 'width:100%; height: 100%'>

   <div  id='AnalysisBodyLeft'></div>
</div>

<div id='AnalysisBodyRight_Parent'> 

  <div  id='AnalysisBodyRight' style = "margin: 20px" >
  <ul style='margin-left: 10px;'>
        <li>Overview</li>
        <li>Hierarchy</li>
        <li>Financials</li>
        <li>Industry</li>
        <li>3rd Party SW</li>
        <li>Additional Assets</li>
    </ul>
    
      <div id="analysisTabOver" style = "margin: 20px">
        <div id="analysisTabOverLeft"></div>
        <div id="analysisTabOverRight"></div>
        <div id="analysisTabOverBottom"></div>
    </div>

    <div id="analysisTabViewpoint" style = "margin: 20px"></div>

    <div id="analysisTabFin" style = "margin: 20px" >
        <div id="analysisTabFinLeft"></div>
        <div id="analysisTabFinRight"></div>
    </div>

    <div id="analysisTabInd" style = "margin: 20px"></div>
    <div id=analysisTabComp style = "margin: 20px"> </div>

    <div id=analysisTabWeb style="text-align: center;">  </div>

  </div>
</div>
</div>

...

{CREATE THE SPLITTER}
// Create the Splitter for the Analysis Tab
$("#AnalysisBodyAll").jqxSplitter({
    width: '100%',
    height: '800px',
    theme: 'fresh',
    panels: [{ size: '40%', min: "10%" },  { size: '60%', min:"10%"}, {collapsible:'true'}]
});

...

{CREATE AND POPULATE THE JQXTREE}
var dataSource = [];
$('#AnalysisBodyLeft').jqxListBox({ source: dataSource, 
                                   allowDrag: false, 
                                   incrementalSearch: true,
                                   searchMode: 'startswithignorecase',
                                   //filterable: true,
                                   theme: 'fresh',
                                   scrollBarSize:15,
                                   //autoHeight: true,
                                   height: '100%', 
                                   width:  '100%' 
                                  });

...
{HERE IS HOW DATA IS ADDED.  NOTE THAT SOME CODE HAS BEEN REMOVED}
// Loop through an AJAX CALL… The items get added via
       dataSource.push(newItem);  
// At the end of the  loop
   $("#AnalysisBodyLeft").jqxListBox('refresh');

...
{THIS IS THE CODE THAT GETS EXECUTED WHEN TAB 2 BECOMES ACTIVE, to try to force a resize}
setTimeout(function() {   
                   console.log('Actual refresh for analysis event fired');
                   $("#AnalysisBodyAll").jqxSplitter('refresh');
                   $('#AnalysisBodyLeft').jqxTree('refresh');             
                   },1250);  

Again, the tree displays the proper data, but the tree does not set the proper height and width unless I MANUALLY (not programatically) force a SPLITTER resize.

What am I doing wrong?

[HristoParticipant]

Hello George S,

In the shared source code is used one same selector #AnalysisBodyLeft for both – jqxTree and jqxListBox.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts