Tree sticks to mouse

[dima72Participant]

Dear All,

I have modal Window and Tree with directory structure in it.
When I click on expand triangle in the Tree, the Tree with modal Window sticks to mouse and and I can not select a particular node
in the Tree because when I moving mouse the Window moves too.

please help.

Tree Script:

            var tree = $('#jqxTree');
            var TreeSource = null;
            $.ajax({
                async: false,
                url: "directorylisting.htm?C:_dash_",
                success: function (data, status, xhr) {
                    TreeSource = jQuery.parseJSON(data);
                }
            });
            tree.jqxTree({ source: TreeSource,  height: 300, width: 500 });
            tree.on('expand', function (event) {
                var label = tree.jqxTree('getItem', event.args.element).label;
                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) {
                    $.ajax({
                        url: loaderItem.value,
                        success: function (data, status, xhr) {
                            var items = jQuery.parseJSON(data);
                            tree.jqxTree('addTo', items, $element[0]);
                            tree.jqxTree('removeItem', loaderItem.element);
                        }
                    });
                }
            });

Window HTML:
` <div id=’jqxwindow2′>
<div>
<div>Directory Select</div>
<div id=”jqxTree”></div>
<div><br></div>
<div></div>
<div style=’float: none;’>
<button id=”OK_btn2″>OK</button>
<button id=”Cancel_btn2″>Cancel</button>
</div>
<div><br></div>
</div>
<div></div>
</div>`

[ivailoParticipant]

Hi dima72,

You have a problem with your HTML code. This widget have 2 sections. Firs one is used about Header, and second – about the content.
You are included the three in first section(first <div>) and this is wrong. The code must be in second secction.

Here is the corect code:

 <div id=’jqxwindow2′>
        <div>
        </div>
        <div>
            <div>Directory Select</div>
            <div id=”jqxTree”></div>
            <div><br></div>
            <div></div>
            <div style=’float: none;’>
                <button id=”OK_btn2″>OK</button>
                <button id=”Cancel_btn2″>Cancel</button>
            </div>
            <div><br></div>
        </div>
    </div>

Also you can set the draggable property to salse.

$('#jqxwindow2').jqxWindow({ draggable: false });

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[dima72Participant]

Ivailo, thank you very much. It works!

[Author]

Posts