jQuery UI Widgets Forums Layouts Splitter Incorrect resizing of contained tree

Tagged: ,

This topic contains 2 replies, has 2 voices, and was last updated by  timaios 11 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Incorrect resizing of contained tree #6589

    timaios
    Member

    Hi,

    I’m using a tree in the left panel of a splitter. I’ve added some code to the window.resize function to make sure that the tree (and its scrollbars) fit nicely into the panel. When most of the tree nodes are expanded (requiring a vertical scrollbar), the following problems appear:

    Problem #1: When moving the splitter bar “into” the text of the visible tree nodes and thus forcing the tree to display a horizontal scrollbar, the scrollbars get partially or completely hidden.

    Problem #2: It takes too much time to resize the widgets. Even with a rather small amount of items (5x5x5), setting the tree’s new width takes almost half a second on the desktop (Firefox) and way longer on the iPad. Is there any way to speed this up?

    Code:

    <!DOCTYPE html>
    <html lang=”en”>

    <head>

    <meta charset=”utf8″ />
    <title>TEST</title>

    <link rel=”stylesheet” href=”/lib/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”/lib/jqwidgets/styles/jqx.classic.css” type=”text/css” />
    <script type=”text/javascript” src=”/lib/jquery.js”></script>
    <script type=”text/javascript” src=”/lib/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”/lib/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”/lib/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”/lib/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”/lib/jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”/lib/jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”/lib/jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”/lib/jqwidgets/jqxgrid.columnsresize.js”></script>
    <script type=”text/javascript” src=”/lib/jqwidgets/jqxpanel.js”></script>
    <script type=”text/javascript” src=”/lib/jqwidgets/jqxtree.js”></script>
    <script type=”text/javascript” src=”/lib/jqwidgets/jqxsplitter.js”></script>
    <script type=”text/javascript” src=”/lib/jqwidgets/jqxtabs.js”></script>

    </head>

    <body>
    <div id=”content”>

    <script type=”text/javascript”>

    function arrangeWidgets()
    {
    // calculate width and height of the main widget
    var totalWidth = window.innerWidth – 28;
    var totalHeight = window.innerHeight – 24;

    // resize the main splitter widget
    var mainWidget = $(“#treeDetailsSplitter”);
    mainWidget.jqxSplitter(“width”, totalWidth);
    mainWidget.jqxSplitter(“height”, totalHeight);

    // set the height for the remaining widgets
    $(“#facilityTree”).jqxTree(“height”, totalHeight);
    $(“#masterDataPanel”).jqxPanel(“height”, 200);
    $(“#detailsTab”).jqxTabs(“height”, totalHeight – 240);

    // get width of left panel
    var leftPanelSize = mainWidget.jqxSplitter(“panels”)[0].size;
    var rightPanelSize = mainWidget.jqxSplitter(“panels”)[1].size;

    // set the widgets’s width values
    $(“#theTree”).jqxTree(“width”, leftPanelSize);
    $(“#masterDataPanel”).jqxPanel(“width”, rightPanelSize);
    $(“#detailsTab”).jqxTabs(“width”, rightPanelSize);
    }

    $(document).ready(function()
    {
    // populate the tree’s DOM element
    var tree = $(“#theTree”);
    tree.append(“<ul></ul>”);
    var treeNodes = tree.children(“ul”);
    for (var i = 0; i < 5; i++)
    {
    // insert current parent
    var parentId = “p-” + i;
    var parentText = “Parent #” + i;
    treeNodes.append(‘<li id=”‘ + parentId + ‘”><img style=”float: left; margin-right: 4px;” src=”test.png” /><span item-title=”true”>’ + parentText + ‘</span></li>’);

    // insert some children
    var parent = $(“#” + parentId);
    parent.append(“<ul></ul>”);
    var parentNodes = parent.children(“ul”);
    for (var j = 0; j < 5; j++)
    {
    // insert current child
    var childId = “c-” + i + “-” + j;
    var childText = “Child #” + j + ” of parent #” + i;
    parentNodes.append(‘<li id=”‘ + childId + ‘”><img style=”float: left; margin-right: 4px;” src=”test.png” /><span item-title=”true”>’ + childText + ‘</span></li>’);

    // insert another layer
    var gParent = $(“#” + childId);
    gParent.append(“<ul></ul>”);
    var gParentNodes = gParent.children(“ul”);
    for (var k = 0; k < 5; k++)
    {
    // insert current grandchild
    var gChildId = “g-” + i + “-” + j + “-” + k;
    var gChildText = “Grandchild #” + k + ” of child #” + j + ” of parent #” + i;
    gParentNodes.append(‘<li id=”‘ + gChildId + ‘”><img style=”float: left; margin-right: 4px;” src=”test.png” /><span item-title=”true”>’ + gChildText + ‘</span></li>’);
    }
    }
    }

    // set theme
    var theme = “classic”;
    var themeUrl = “/lib/jqwidgets/styles/jqx.” + theme + “.css”;
    if (document.createStyleSheet != undefined)
    document.createStyleSheet(themeUrl);
    else
    $(document).find(“head”).append(‘<link rel=”stylesheet” href=”‘ + themeUrl + ‘” media=”screen” />’);

    // initialize widgets
    $(“#treeDetailsSplitter”).jqxSplitter(
    {
    theme: theme,
    roundedcorners: true,
    panels:
    [
    { collapsible: false },
    { collapsible: true }
    ]
    });
    tree.jqxTree({ width: “100%”, height: “100%”, theme: theme });
    $(“#masterDataPanel”).jqxPanel({ theme: theme });
    $(“#detailsTab”).jqxTabs({ position: “top”, theme: theme });

    // perform initial layout
    arrangeWidgets();

    // make sure that the sizes get adjusted when the browser window resizes
    // NOTE: moving the splitter’s bar triggers this event too
    $(window).resize(function() { arrangeWidgets(); });
    });

    </script>

    <div id=”mainWidget”>
    <div id=”treeDetailsSplitter”>
    <div id=”theTree” style=”border: none;”></div>
    <div id=”detailsArea”>
    <div id=”masterDataPanel” style=”border: none;”>
    </div>
    <div id=”detailsTab”>
    <ul>
    <li style=”margin-left: 16px;”>Tab #1</li>
    <li>Tab #2</li>
    <li>Tab #3</li>
    <li>Tab #4</li>
    </ul>
    <div id=”tabContent1″>
    Content of tab #1
    </div>
    <div id=”tabContent2″>
    Content of tab #2
    </div>
    <div id=”tabContent3″>
    Content of tab #3
    </div>
    <div id=”tabContent4″>
    Content of tab #4
    </div>
    </div>
    <div id=”buttons” style=”height: 40px; padding-top: 8px; text-align: right;”>
    <input type=”button” id=”saveButton” value=”Save” />
    </div>
    </div>
    </div>
    </div>

    </body>

    </html>

    Incorrect resizing of contained tree #6597

    Peter Stoev
    Keymaster

    Hi timaios,

    I’ve updated your code and here’s the result:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>TEST</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <style>
    html, body
    {
    width: 100%;
    height: 100%;
    overflow: hidden;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    $(document).ready(function () {
    // populate the tree's DOM element
    var tree = $("#theTree");
    tree.append("<ul></ul>");
    var treeNodes = tree.children("ul");
    for (var i = 0; i < 5; i++) {
    // insert current parent
    var parentId = "p-" + i;
    var parentText = "Parent #" + i;
    treeNodes.append('<li id="' + parentId + '"><img style="float: left; margin-right: 4px;" src="test.png" /><span item-title="true">' + parentText + '</span></li>');
    // insert some children
    var parent = $("#" + parentId);
    parent.append("<ul></ul>");
    var parentNodes = parent.children("ul");
    for (var j = 0; j < 5; j++) {
    // insert current child
    var childId = "c-" + i + "-" + j;
    var childText = "Child #" + j + " of parent #" + i;
    parentNodes.append('<li id="' + childId + '"><img style="float: left; margin-right: 4px;" src="test.png" /><span item-title="true">' + childText + '</span></li>');
    // insert another layer
    var gParent = $("#" + childId);
    gParent.append("<ul></ul>");
    var gParentNodes = gParent.children("ul");
    for (var k = 0; k < 5; k++) {
    // insert current grandchild
    var gChildId = "g-" + i + "-" + j + "-" + k;
    var gChildText = "Grandchild #" + k + " of child #" + j + " of parent #" + i;
    gParentNodes.append('<li id="' + gChildId + '"><img style="float: left; margin-right: 4px;" src="test.png" /><span item-title="true">' + gChildText + '</span></li>');
    }
    }
    }
    // set theme
    var theme = '';
    // initialize widgets
    $("#treeDetailsSplitter").jqxSplitter(
    {
    theme: theme,
    width: '97%', height: '97%',
    roundedcorners: true,
    panels:
    [
    { size: 300, collapsible: false },
    { collapsible: true }
    ]
    });
    tree.jqxTree({ width: "100%", height: "100%", theme: theme });
    $("#masterDataPanel").jqxPanel({ theme: theme });
    $("#detailsTab").jqxTabs({ position: "top", width: '100%', theme: theme });
    });
    </script>
    <div id="treeDetailsSplitter">
    <div id='treeArea'>
    <div id="theTree" style="border: none;">
    </div>
    </div>
    <div id="detailsArea">
    <div id="masterDataPanel" style="border: none;">
    </div>
    <div id="detailsTab">
    <ul>
    <li style="margin-left: 16px;">Tab #1</li>
    <li>Tab #2</li>
    <li>Tab #3</li>
    <li>Tab #4</li>
    </ul>
    <div id="tabContent1″">
    Content of tab #1
    </div>
    <div id="tabContent2″">
    Content of tab #2
    </div>
    <div id="tabContent3″">
    Content of tab #3
    </div>
    <div id="tabContent4″">
    Content of tab #4
    </div>
    </div>
    <div id="buttons" style="height: 40px; padding-top: 8px; text-align: right;">
    <input type="button" id="saveButton" value="Save" />
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Incorrect resizing of contained tree #6639

    timaios
    Member

    Hi Peter,

    thanks for the code review. Sure enough, it solves both problems… 🙂

    So I take it that assigning relative widths or heights is the preferred way of handling resizing of the browser window? I obviously didn’t catch that when I went over the examples…
    It seems to me that the flexibility of jQWidgets opens more than one way to the solution of a task, but some ways end in frustration while others solve the task elegantly. I guess it’s all a matter of experience…

    Cheers,
    Tim

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.