Incorrect resizing of contained tree - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: splitter, Tree

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

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

Author

Incorrect resizing of contained tree Posts
August 5, 2012 at 11:34 am 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>

August 5, 2012 at 8:53 pm 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
August 6, 2012 at 8:28 pm 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
Author

Posts

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

You must be logged in to reply to this topic.