jQWidgets Forums

Tagged: CPU, jqxnavigationbar, jqxtree, navigationbar, process, refresh, Tree

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

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

Author

Tree refresh causing unexpected CPU usage Posts

March 15, 2014 at 9:20 pm Tree refresh causing unexpected CPU usage #51083

Participant

I have a tree nested in a jQuery accordion. I’ve added a call to refresh the tree when the accordion section expands. When I do this, there appears to be some process that starts and continues to run until the section collapses. What I’m observing is the CPU on my machine hovers around 10%.

If I comment out the call to refresh, I no longer have that problem.

Incidentally, the reason I am calling refresh is because we noticed an issue in our UI. Our UI consists of a split pane (vertical) with an accordion on the left side. The accordion has a few sections and some of those sections have trees. If we collapse a section then move the split bar, on expanding the section, the tree has part of its content cut off. That is why we call refresh.

Here is a jsfiddle that demonstrates the issue.

Does anyone know why the refresh call causes this CPU usage? Alternatively, is there another way to refresh the tree so its content is not cut off? (Something similar to a revalidate call in Java Swing, which I guess is basically what refresh is.)

Thanks!

March 17, 2014 at 7:21 am Tree refresh causing unexpected CPU usage #51144

Dimitar

Participant

Hello sirstruck,

We reproduced your issue. However, it is not related to jqxTree, but to the accordion.

We recommend you to use jqxNavigationBar instead:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnavigationbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxNavigationBar
            $("#jqxNavigationBar").jqxNavigationBar({ width: 400, height: 420, expandMode: "multiple", initContent: function () {
                $('#jqxTree').jqxTree({
                    theme: 'energyblue'
                });
            }
            });

            $('#jqxNavigationBar').on('expandedItem', function (event) {
                var expandedItem = event.args.item;
                if (expandedItem == 0) {
                    $('#jqxTree').jqxTree("refresh");
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="float: left;">
        <div id='jqxNavigationBar'>
            <div>
                Header 1</div>
            <div>
                <div id='jqxTree'>
                    <ul>
                        <li item-selected='true'>Home</li>
                        <li item-expanded='true'>Solutions
                            <ul>
                                <li>Education</li>
                                <li>Financial services</li>
                                <li id="government">Government</li>
                                <li>Manufacturing</li>
                                <li>Solutions
                                    <ul>
                                        <li>Consumer photo and video</li>
                                        <li>Mobile</li>
                                    </ul>
                                </li>
                                <li>All industries and solutions</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div>
                Header 2</div>
            <div>
                Content 2
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.