jQWidgets Forums

Forum Replies Created

Viewing 13 posts - 16 through 28 (of 28 total)

← 1 2

Author

Posts

September 28, 2014 at 5:25 am in reply to: Resize window issue Resize window issue #60197

Rob

Participant

Update to previous post. The resize cursor appears but the window can’t be resized.

BTW : trying to edit a previous post using the ‘edit’ hyperlink on this page does not work. Clicking the hyperlink reloads the website

September 22, 2014 at 1:44 pm in reply to: Feature request: tooltip for disabled button/control Feature request: tooltip for disabled button/control #59859

Rob

Participant

Thanks for the clarification !

September 21, 2014 at 9:50 pm in reply to: Feature request: tooltip for disabled button/control Feature request: tooltip for disabled button/control #59830

Rob

Participant

Hi Peter,

RE: “but this cannot happen with our widgets”

That’s why i mentioned it as a feature thing

Thanks,Rob

September 21, 2014 at 11:58 am in reply to: Feature request: tooltip for disabled button/control Feature request: tooltip for disabled button/control #59825

Rob

Participant

Hi Peter,

I don’t want to be impolite, but the idea is not about how an elements look at the screen. Its about the possibility to supply information to the user why, for example, a button is disabled.

Thanks, Rob

September 19, 2014 at 1:28 pm in reply to: Tree Idea Tree Idea #59781

Rob

Participant

Hello Dimitar,

I am still learning (and need to learn a lot) but i think i did not express my idea/wish good enough.
I don’t want the <html> parent element but the item seen as parent on the screen.
For example a tree consist of playlist names and each playlist has a number of songs attached. When i click the song i like to have the playlist item returned. Maybe to notice that my parent and child list elements are composed of <div> and an number of other html elements.

Thanks,
Rob

September 17, 2014 at 2:36 pm in reply to: Hide treeitem possible? Hide treeitem possible? #59650

Rob

Participant

Hi Nadezhda,

Did you noticed the remark i wrote?

Thanks, Rob

September 17, 2014 at 1:45 pm in reply to: Hide treeitem possible? Hide treeitem possible? #59643

Rob

Participant

Hi Nadezhda,

Thanks for the info.. I already has a JavaScript loop to iterate throe the list items. However i did understood how to set the CSS
The following code shows what i did and changed.

REMARK !! Using (visibility hide) instead if (display none) does not hide <images.. /> if embedded a the list item. Not sure of that is by design or to be considered as a bug


funtion myHide(id2Hide)
{
var items = tree.jqxTree('getItems');
for (var i = 0; i < items.length; i++) {
    var item = items[i];
    if (item.value == null)
        continue;
    if (item.value[0] == 'p') {
        if (parseInt(item.value.substr(1)) == id2Hide) {
        // changed this
        // item.css("visibility", "none");
        // into this 
        $('#'+item.id).css("display", "none");
            return;
        }
    }
}
}

September 17, 2014 at 7:30 am in reply to: Event when deleting last character on input Event when deleting last character on input #59614

Rob

Participant

hello Nadezhda,

Thanks for your quick reply. I have a handlers installed for the change event but that one only gets fired after pressing the enter key.
I like to have an event when the input fields become empty.

Thanks, Rob

September 9, 2014 at 1:06 pm in reply to: Possible to show expand arrow? 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]);
                }

September 9, 2014 at 9:35 am in reply to: Possible to show expand arrow? 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 8, 2014 at 11:45 am in reply to: Possible to show expand arrow? Possible to show expand arrow? #59245

Rob

Participant

removed..

September 8, 2014 at 11:43 am in reply to: Possible to show expand arrow? 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 10:11 am in reply to: Possible to show expand arrow? Possible to show expand arrow? #59228

Rob

Participant

Thanks Nadezhda!

Author

Posts

Viewing 13 posts - 16 through 28 (of 28 total)

← 1 2