jQuery UI Widgets Forums Navigation Tree Tree Normally Sized Properly

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 7 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Tree Normally Sized Properly #85987

    George S
    Participant

    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?

    Tree Normally Sized Properly #86010

    Hristo
    Participant

    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

    • This reply was modified 7 years, 11 months ago by  Hristo.
    • This reply was modified 7 years, 11 months ago by  Hristo.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.