jQWidgets Forums

Tagged: expand arrow, inline data, jqxtree, onexpand, Tree

This topic contains 7 replies, has 2 voices, and was last updated by Rob 10 years, 8 months ago.

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

Author

Possible to show expand arrow? Posts

September 8, 2014 at 8:37 am Possible to show expand arrow? #59222

Rob

Participant

Hi, Is it possible to show the expand arrow of a tree item(

) yet. list items will be loaded from a server in an onExpand event handler.
Thanks, Rob

September 8, 2014 at 9:55 am Possible to show expand arrow? #59227

Nadezhda

Participant

Hello Rob,

Please, check out the demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/ajaxloading.htm?arctic. I hope it would be helpful.

Best Regards,
Nadezhda

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

September 8, 2014 at 10:11 am Possible to show expand arrow? #59228

Rob

Participant

Thanks Nadezhda!

September 8, 2014 at 11:43 am Possible to show expand arrow? #59244

Rob

Participant

My code is almost identical as in the example, however instead of using ajax and json i retrieve the data from a server using websockets and place them in an array. In a onExpand handler,see partial code below, i try to populate the data but it does not show up on the screen. Can you advise what is wrong in my approach?

var toadd = "<div class='song' id='p" + playListId.toString() + "s" + s.toString() + "'><a href='#'><img src='Images/arrow_up_32.png' height='17' width='17' /></a><a href='#'><img src='Images/arrow_down_32.png' height='17' width='17' /></a>" + songList[s].name + "<div style='float: right;'><a href='#'><img src='Images/cancel_32.png' height='17' width='17' /></a></div></div>";
this.jqxTreeId.jqxTree('addTo', { html: toadd }, treeViewElement);

September 8, 2014 at 11:45 am Possible to show expand arrow? #59245

Rob

Participant

removed..

September 9, 2014 at 6:18 am Possible to show expand arrow? #59291

Nadezhda

Participant

Hi Rob,

This code is insufficient for us to determine the source of the issue. Please provide us with larger code sample.

Best Regards,
Nadezhda

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

September 9, 2014 at 9:35 am Possible to show expand arrow? #59311

Rob

Participant

Hi Nadezhda,

Your ajaxLoading example helped me to get the above question working. However a new question showed up. How do i get rid of the root item in the following code. I only want to see the playlist and expanded songs. I dont want to expand the root before i can see the playlist’s

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>
        This sample demonstrates how to load Tree Items via Ajax (Modified to populate data inline)
    </title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <style>
        .playList {
            width: 350px;
            background-color: darkgreen;
            color: white;
            float: left;
            font-weight: bold;
        }
        .song {
            float: left;
            width: 300px;
            background-color: honeydew;
        }
    </style>

    <script type="text/javascript" src="JavaScript/jquery-1.11.1.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">
        
        function onClickPlaylist(playListObject) {
            ; // nothing done
        }

        $(document).ready(function () {
            // Create jqxTree
            var tree = $('#jqxTree');
            tree.jqxTree({ height: 300, width: 500, allowDrop: true, allowDrag: true });

            // populate list items
            var toadd = "<ul>";
                toadd += ("<li item-expanded=" + (false ? "'true'" : "'false'") + "'><div class='playList' id='pl1' onclick='onClickPlaylist(this);'>" + "PlayList 1" + "<div style='float: right;'><a href='#'><img src='Images/recycle_bin_empty_24.png' height='17' width='17' title='delete this playlist (audio files are not physically deleted)' /></a></div><div style='float: right;'>&nbsp;<a href='#'><img src='images/edit_blue_24.png' height='17' width='17' title='edit the name of the playlist' /></a></div><div style='float: right;'>&nbsp;<a href='#'><img alt='add a song to playlist button' src='Images/plus_32.png' width='17' height='17' title='add a song to the playlist' /></a></div></div>");
                    toadd += "<ul>";
                        toadd += "<li>Loading...</li>";
                    toadd += "</ul>";
                toadd += "</li>";
                toadd += ("<li item-expanded=" + (false ? "'true'" : "'false'") + "'><div class='playList' id='pl2' onclick='onClickPlaylist(this);'>" + "PlayList 2" + "<div style='float: right;'><a href='#'><img src='Images/recycle_bin_empty_24.png' height='17' width='17' title='delete this playlist (audio files are not physically deleted)' /></a></div><div style='float: right;'>&nbsp;<a href='#'><img src='images/edit_blue_24.png' height='17' width='17' title='edit the name of the playlist' /></a></div><div style='float: right;'>&nbsp;<a href='#'><img alt='add a song to playlist button' src='Images/plus_32.png' width='17' height='17' title='add a song to the playlist' /></a></div></div>");
                    toadd += "<ul>";
                        toadd += "<li>Loading...</li>";
                    toadd += "</ul>";
                toadd += "</li>";
            toadd += "</ul>";
            tree.jqxTree('addTo', { html: toadd });

            tree.on('expand', function (event) {
                var $element = $(event.args.element);
                var loader = false;
                var loaderItem = null;
                var children = $element.find('ul:first').children();
                $.each(children, function () {
                    var item = tree.jqxTree('getItem', this);
                    if (item && item.label == 'Loading...') {
                        loaderItem = item;
                        loader = true;
                        return false;
                    };
                });
                if (loader) {
                    var playListId = 1;
                    var song = "Song";
                    for (var s = 0; s < 5; s++) {
                        var items = "<div class='song' id='p" + playListId.toString() + "s" + s.toString() + "'><a href='#'><img src='Images/arrow_up_32.png' height='17' width='17' style='visibility: hidden;' />" +
                            "</a><a href='#'><img src='Images/arrow_down_32.png' height='17' width='17' style='visibility: visible;' /></a>" + song + "<div style='float: right;'><a href='#'><img src='Images/cancel_32.png' height='17' width='17' title='remove song from playlist' /></a></div></div>";
                        tree.jqxTree('addTo', { html: items }, $element[0]);
                    }
                    tree.jqxTree('removeItem', loaderItem.element);
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxWidget">
        <div id="jqxTree">
        </div>
    </div>
</body>
</html>

September 9, 2014 at 1:06 pm Possible to show expand arrow? #59331

Rob

Participant

SOLVED.

I replaced

// populate list items
            var toadd = "<ul>";
                toadd += ("<li item-expanded=" + (false ? "'true'" : "'false'") + "'><div class='playList' id='pl1' onclick='onClickPlaylist(this);'>" + "PlayList 1" + "<div style='float: right;'><a href='#'><img src='Images/recycle_bin_empty_24.png' height='17' width='17' title='delete this playlist (audio files are not physically deleted)' /></a></div><div style='float: right;'>&nbsp;<a href='#'><img src='images/edit_blue_24.png' height='17' width='17' title='edit the name of the playlist' /></a></div><div style='float: right;'>&nbsp;<a href='#'><img alt='add a song to playlist button' src='Images/plus_32.png' width='17' height='17' title='add a song to the playlist' /></a></div></div>");
                    toadd += "<ul>";
                        toadd += "<li>Loading...</li>";
                    toadd += "</ul>";
                toadd += "</li>";
                toadd += ("<li item-expanded=" + (false ? "'true'" : "'false'") + "'><div class='playList' id='pl2' onclick='onClickPlaylist(this);'>" + "PlayList 2" + "<div style='float: right;'><a href='#'><img src='Images/recycle_bin_empty_24.png' height='17' width='17' title='delete this playlist (audio files are not physically deleted)' /></a></div><div style='float: right;'>&nbsp;<a href='#'><img src='images/edit_blue_24.png' height='17' width='17' title='edit the name of the playlist' /></a></div><div style='float: right;'>&nbsp;<a href='#'><img alt='add a song to playlist button' src='Images/plus_32.png' width='17' height='17' title='add a song to the playlist' /></a></div></div>");
                    toadd += "<ul>";
                        toadd += "<li>Loading...</li>";
                    toadd += "</ul>";
                toadd += "</li>";
            toadd += "</ul>";
            tree.jqxTree('addTo', { html: toadd });

with:


for (var i = 0; i < this.treeData.length; i++) {
                    var toadd = "<div class='playList' id='pl" + (this.treeData[i].id.toString()) + "' onclick='onClickPlaylist(this);'>" + this.treeData[i].name + "<div style='float: right;'><a href='#'><img src='Images/recycle_bin_empty_24.png' height='17' width='17' title='delete this playlist (audio files are not physically deleted)' /></a></div><div style='float: right;'>&nbsp;<a href='#'><img src='images/edit_blue_24.png' height='17' width='17' title='edit the name of the playlist' /></a></div><div style='float: right;'>&nbsp;<a href='#'><img alt='add a song to playlist button' src='Images/plus_32.png' width='17' height='17' title='add a song to the playlist' /></a></div></div>";
                    this.jqxTreeId.jqxTree('addTo', { label: toadd });
                    var items = this.jqxTreeId.jqxTree('getItems');
                    this.jqxTreeId.jqxTree('addTo', { label: "Loading..." }, items[items.length-1]);
                }

Author

Posts

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

You must be logged in to reply to this topic.