jQuery UI Widgets Forums Navigation Tree Tree refresh causing unexpected CPU usage

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

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

  • sirstruck
    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!


    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/

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

You must be logged in to reply to this topic.