[AndyParticipant]

Pete,

The API documentation is my first point of call and have read the api documentation very carefully. The ‘GetItems’ method is available but seems to me a very inefficient way of getting children when I have to parse through the complete tree to only expand the items of interest, unless I’m missing something…. This, I’m guessing would be problematic for larger trees.

Just an observation.

Ta

[AndyParticipant]

Pete, for completeness I have upload the 4 files and 1 JSON file to PasteBin:

http://pastebin.com/embed_js.php?i=SDHg11Vf

Cheers,

Andy

[AndyParticipant]

Hi Pete.

Thanks for taking the time to reply but I think you have missed the point (which maybe my fault). The problem was initially identified as a specific widget issue but I am absolutely convinced that it is the .load Ajax mechanism that is causing the problem. So we are clear I have attached extracts of the 4 files that recreate my problem… Steps to recreate the issue are,

Load the Main.html page.
Use the RHM button, use the Expand All and Collapse All Popup menu option. These function as the Menu option describe.
Now Click from the main menu and select Create Constant [The form should appear]
Go back to the tree popup and now use the Expand All and Collapse All Popup menu. This has now stopped working!

As I said before, the .load Ajax call seems to be resetting the Tree from the frame or window. Can you confirm that this is the behavior you see?

I updated the Main.html that you supplied with a reference to the Tree HTML file,

        <script type="text/javascript">
            $(document).ready(function() {
                $('#MainSplitContainer').jqxSplitter({width: '100%', height: '100%', orientation: 'vertical', panels: [{size: '25%'}, {size: '75%'}]});
                $('#MainRightSplitContainer').jqxSplitter({height: '100%', width: '100%', orientation: 'horizontal', panels: [{size: '80%'}, {size: '20%'}]});
                $("#treetabswidget").jqxTabs({height: '100%', width: '100%'});
                $("#treeclasspropertytabswidget").jqxTabs({height: '100%', width: '100%'});
                $("#menubar").load("Menu.html");
                <strong>$("#treeclasstabswidget").load("ClassTree.html");</strong>
            });

Next,

I created the following ClassTree,html file,

       <script>
            $(document).ready(function() {
                var url = "treeJsonData.txt";
                var source =
                        {
                            datatype: "json",
                            datafields: [
                                {name: 'id'},
                                {name: 'parentid'},
                                {name: 'text'},
                                {name: 'value'}
                            ],
                            id: 'id',
                            url: url,
                            async: false
                        };
                var dataAdapter = new $.jqx.dataAdapter(source);
                dataAdapter.dataBind();
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{name: 'text', map: 'label'}]);
                $('#jqxTree').jqxTree({source: records, width: '100%', height: '97%'});
                $('#jqxTree').jqxTree({animationShowDuration: 100});
                var contextMenu = $("#jqxClassTreePopupMenu").jqxMenu({width: '200px', height: 'auto', autoOpenPopup: false, mode: 'popup'});
                var clickedItem = null;
                var attachContextMenu = function() {
                    // open the context menu when the user presses the mouse right button.
                    $("#jqxTree li").on('mousedown', function(event) {
                        var target = $(event.target).parents('li:first')[0];
                        var rightClick = isRightClick(event);
                        if (rightClick && target != null) {
                            $("#jqxTree").jqxTree('selectItem', target);
                            var scrollTop = $(window).scrollTop();
                            var scrollLeft = $(window).scrollLeft();
                            contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                            return false;
                        }
                    });
                };
                attachContextMenu();
                $("#jqxClassTreePopupMenu").on('itemclick', function(event) {
                    var item = $.trim($(event.args).text());
                    switch (item) {
                        case "Add Item":
                            var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                            if (selectedItem != null) {
                                $('#jqxTree').jqxTree('addTo', {label: 'Item'}, selectedItem.element);
                                attachContextMenu();
                            }
                            break;
                        case "Remove Item":
                            var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                            if (selectedItem != null) {
                                $('#jqxTree').jqxTree('removeItem', selectedItem.element);
                                attachContextMenu();
                            }
                            break;
                    }
                });
                // disable the default browser's context menu.
                $(document).on('contextmenu', function(e) {
                    if ($(e.target).parents('.jqx-tree').length > 0) {
                        return false;
                    }
                    return true;
                });
                function isRightClick(event) {
                    var rightclick;
                    if (!event)
                        var event = window.event;
                    if (event.which)
                        rightclick = (event.which == 3);
                    else if (event.button)
                        rightclick = (event.button == 2);
                    return rightclick;
                }
            });
            function expandAll() {
                var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                if (selectedItem != null) {
                    $('#jqxTree').jqxTree('expandAll');
                }
            }
            function collapseAll() {
                var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                if (selectedItem != null) {
                    $('#jqxTree').jqxTree('collapseAll');
                }
            }
        </script>
    </head>
    <body>
        <div id='jqxTree'>
            <div style="border: none;" id='jqxTree'>
            </div>
        </div>
        <div id='jqxClassTreePopupMenu'>
            <ul>
                <li><a href="#" onclick="expandAll();">Expand All</a></li>
                <li><a href="#" onclick="collapseAll();">Collapse All</a></li>
                <li>Create
                    <ul>
                        <li><a href="#">Child Class</a></li>
                        <li><a href="#">Insert Class</a></li>
                    </ul>
                </li>
                <li>Modify</li>
                <li>Rename</li>
                <li>Delete</li>
                <li>Help On Context</li>
            </ul>
        </div>
    </body>
</html>

The JsonTreeData File for this test is as follows:

[
{"id":"P1","parentid":"-","text":"P1","value":"0.13591299107109005"},
{"id":"C1","parentid":"P1","text":"C1","value":"0.13591299107109000"},
{"id":"C2","parentid":"P1","text":"C2","value":"0.13591299107109001"},
{"id":"C3","parentid":"P1","text":"C3","value":"0.13591299107109002"},
{"id":"C4","parentid":"P1","text":"C4","value":"0.13591299107109003"}
]

and finally the Constant Form class,

<body>
    <p>
    <div>
        <table id="tableheader">
            <tr>
                <td>
                    Create Constant<p>
                </td>
            </tr>
        </table>
       
        <table>
            <tr>
                <td id="name">Constant Name
                </td>
                <td id="textinput">
                    <input type="text" id="IndexName"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <td id="name">Default Value
                </td>
                <td id="textinput">
                    <input type="text" id="DefaultValue"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <td id="name">Module Name
                </td>
                <td id="textinput">
                    <input type="text" readonly id="ModuleName"/>
                </td>
                <td></td>
            </tr>
        </table>
        <table id="tableheader">
            <tr>
                <td>
                    <button>OK</button><button>Apply</button>
                </td>
            </tr>
        </table>
    </div>
</body>

[AndyParticipant]

BTW… The code baseline is structured this way….

Main Entry Point is
MainPage.html with feeder pages for Menu, Tree and Forms…

MainPage.html something like this…

<pre style='max-width: 740px; width: 740px; margin: 5px; padding: 5px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;MainPage.html&gt;</span><div/></pre> with a separate <pre style='max-width: 740px; width: 740px; margin: 5px; padding: 5px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;menu.html&gt;</span><div/></pre> and <pre style='max-width: 740px; width: 740px; margin: 5px; padding: 5px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;FormFile.html&gt;</span><div/></pre>
MainPage.html looks something like this....
            $(document).ready(function() {
                $('#MainSplitContainer').jqxSplitter({width: '100%', height: '100%', orientation: 'vertical', panels: [{size: '25%'}, {size: '75%'}]});
                $('#MainRightSplitContainer').jqxSplitter({height: '100%', width: '100%', orientation: 'horizontal', panels: [{size: '80%'}, {size: '20%'}]});
                $("#treetabswidget").jqxTabs({height: '100%', width: '100%'});
                $("#treeclasspropertytabswidget").jqxTabs({height: '100%', width: '100%'});
            });
            $(".classloader").ready(function() {
                $("#menubar").load("Menu.html");
            });
            $(".classloader").ready(function() {
                $("#treeclasstabswidget").load("EomfClassTree.html");
            });
        <div id="menubar"></div>
        <div id="MainSplitContainer">
                <div>
                    <div class="jqx-hideborder jqx-hidescrollbars" id="treetabswidget">
                        <ul>
                            <li>CM Class Tree</li>
                            <li>CM Search</li>
                        </ul>
                        <div id="treeclasstabswidget"></div>
                        <div id="treeclasstabswidget1"></div>
                    </div>
                </div>
            <div>
                <div id="MainRightSplitContainer">
                    <div>
                        <div class="jqx-hideborder jqx-hidescrollbars" id="treeclasspropertytabswidget">
                            <ul>
                                <li>General</li>
                                <li>Attributes</li>
                                <li>Constants</li>
                                <li>Keys</li>
                                <li>Methods</li>
                                <li>Indexes</li>
                            </ul>
                            <div id="forms"></div>
                            <div>Attributes</div>
                            <div>Constants</div>
                            <div>Keys</div>
                            <div>Methods</div>
                            <div>Indexes</div>
                        </div>
                    </div>
                    <div id="Status">
                        Status Region
                    </div>
                </div>
            </div>
        </div>

The Menu.html page,

$(document).ready(function() {
                    $("#jqxMainMenu").jqxMenu({width: '600', height: '30', mode: 'horizontal', showTopLevelArrows: true, theme: 'energyBlue'});
                    $("#jqxMainMenu").jqxMenu('setItemOpenDirection', 'Services', 'left', 'down');
                    $("#jqxMainMenu").jqxMenu('setItemOpenDirection', 'ContactUs', 'left', 'down');
                    $("#jqxMainMenu").css('visibility', 'visible');
                });
                function loadForm(htmlFile)
                {
                    $(".classloader").ready(function() {
                        var enSurePageReload = Math.random();
                        $("#forms").load(htmlFile + "?enSureReload=" + enSurePageReload);
                    });
                }
            <div id='jqxWidget' style='margin-top: 0px; width: 310px;'>
                <div id='jqxMainMenu' style="visibility: hidden;">
                    <ul>
                        <li style="width: 60px;"><a href="#">File</a>
                            <ul>
                                <li><a href="#" onclick="loadForm('NewProject.html');">New Project</a></li>
                                <li><a href="#" onclick="loadForm('OpenProject.html');">Open Project</a></li>
                                <li><a href="#">Exit</a></li><li><a href="#" onclick="loadTree('EomfClassTree.html');">Save Project</a></li>
                                <li><a href="#">Project Save As</a></li>
                                <li><a href="#">Close Project</a></li>
                            </ul>
                        </li>
                        <li style="width: 60px;"><a href="#">Create</a>
                            <ul>
                                <li><a href="#">Class</a>
                                    <ul>
                                        <li><a href="#" onclick="loadForm('NewItemClass.html');">Item</a></li>
                                        <li><a href="#" onclick="loadForm('NewFormClass.html');">Form</a></li>
                                        <li><a href="#" onclick="loadForm('NewRelClass.html');">Relation</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Attribute</a>
                                    <ul>
                                        <li><a href="#" onclick="loadForm('NewAttrPersist.html');">Persistent</a></li>
                                        <li><a href="#" onclick="loadForm('NewAttrDyn.html');">Dynamic</a></li>
                                    </ul>
                                </li>
                                <li><a href="#" onclick="loadForm('NewConstant.html');">Constant</a></li>
                                <li><a href="#" onclick="loadForm('NewMethod.html');">Method</a></li>
                                <li><a href="#" onclick="loadForm('NewKey.html');">Key</a></li>
                                <li><a href="#" onclick="loadForm('NewIndex.html');">Index</a></li>
                                <li><a href="#" onclick="loadForm('NewAttrSet.html');">Attribute Set</a></li>
                                <li><a href="#" onclick="loadForm('NewPickList.html');">Pick List</a></li>
                                <li><a href="#" onclick="loadForm('NewMenu.html');">Menu</a></li>
                                <li><a href="#" onclick="loadForm('NewMenuItem.html');">Menu Item</a></li>
                            </ul>
                        </li>
                        <li style="width: 60px;"><a href="#">Find</a>
                            <ul>
                                <li><a href="#">Class</a></li>
                                <li><a href="#">Attribute</a></li>
                                <li><a href="#">Constant</a></li>
                                <li><a href="#">Method</a></li>
                                <li><a href="#">Key</a></li>
                                <li><a href="#">Index</a></li>
                                <li><a href="#">Attribute Set</a></li>
                                <li><a href="#">Pick List</a></li>
                                <li><a href="#">Menu</a></li>
                                <li><a href="#">Menu Item</a></li>
                            </ul>
                        </li>
                        <li style="width: 60px;"><a href="#">Action</a>
                            <ul>
                                <li><a href="#">Verify Data Model</a></li>
                            </ul>
                        </li>
                        <li style="width: 60px;"><a href="#">Help</a>
                            <ul>
                                <li><a href="#">Session Information</a></li>
                                <li><a href="#">General Help</a></li>
                                <li><a href="#">Menus</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Online Manual</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

the tree.html …..

           $(document).ready(function() {
                var url = "../jsp/initClassTreeAttrs.jsp";
                var source =
                        {
                            datatype: "json",
                            datafields: [
                                {name: 'id'},
                                {name: 'parentid'},
                                {name: 'text'},
                                {name: 'value'}
                            ],
                            id: 'id',
                            url: url,
                            async: false
                        };
                var dataAdapter = new $.jqx.dataAdapter(source);
                dataAdapter.dataBind();
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{name: 'text', map: 'label'}]);
                $('#jqxTree').jqxTree({source: records, width: '100%', height: '97%'});
                $('#jqxTree').jqxTree({ animationShowDuration: 100 }); 
                var contextMenu = $("#jqxClassTreePopupMenu").jqxMenu({width: '200px', height: 'auto', autoOpenPopup: false, mode: 'popup'});
                var clickedItem = null;
                var attachContextMenu = function() {
                    // open the context menu when the user presses the mouse right button.
                    $("#jqxTree li").on('mousedown', function(event) {
                        var target = $(event.target).parents('li:first')[0];
                        var rightClick = isRightClick(event);
                        if (rightClick && target != null) {
                            $("#jqxTree").jqxTree('selectItem', target);
                            var scrollTop = $(window).scrollTop();
                            var scrollLeft = $(window).scrollLeft();
                            contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                            return false;
                        }
                    });
                };
                attachContextMenu();
                $("#jqxClassTreePopupMenu").on('itemclick', function(event) {
                    var item = $.trim($(event.args).text());
                    switch (item) {
                        case "Add Item":
                            var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                            if (selectedItem != null) {
                                $('#jqxTree').jqxTree('addTo', {label: 'Item'}, selectedItem.element);
                                attachContextMenu();
                            }
                            break;
                        case "Remove Item":
                            var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                            if (selectedItem != null) {
                                $('#jqxTree').jqxTree('removeItem', selectedItem.element);
                                attachContextMenu();
                            }
                            break;
                    }
                });
                // disable the default browser's context menu.
                $(document).on('contextmenu', function(e) {
                    if ($(e.target).parents('.jqx-tree').length > 0) {
                        return false;
                    }
                    return true;
                });
                function isRightClick(event) {
                    var rightclick;
                    if (!event)
                        var event = window.event;
                    if (event.which)
                        rightclick = (event.which == 3);
                    else if (event.button)
                        rightclick = (event.button == 2);
                    return rightclick;
                }
            });
    <body>
        <div id='jqxTree'>
            <div style="border: none;" id='jqxTree'>
            </div>
        </div>
        <div id='jqxClassTreePopupMenu'>
            <ul>
                <li><a href="#" onclick="expandAll();">Expand All</a></li>
                <li><a href="#" onclick="expandBranch();">Expand Branch</a></li>
                <li><a href="#" onclick="collapseAll();">Collapse All</a></li>
                <li><a href="#" onclick="collapseBranch();">Collapse Branch</a></li>
                <li>Create
                    <ul>
                        <li><a href="#">Child Class</a></li>
                        <li><a href="#">Insert Class</a></li>
                    </ul>
                </li>
                <li>Modify</li>
                <li>Rename</li>
                <li>Delete</li>
                <li>Help On Context</li>
            </ul>
        </div>
    </body>

and the form.html ….

<body>
    <p>
    <div>
        <table id="tableheader">
            <tr>
                <td>
                    Create Constant<p>
                </td>
            </tr>
        </table>
       
        <table>
            <tr>
                <td id="name">Constant Name
                </td>
                <td id="textinput">
                    <input type="text" id="IndexName"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <td id="name">Default Value
                </td>
                <td id="textinput">
                    <input type="text" id="DefaultValue"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <td id="name">Module Name
                </td>
                <td id="textinput">
                    <input type="text" readonly id="ModuleName"/>
                </td>
                <td></td>
            </tr>
        </table>
        <table id="tableheader">
            <tr>
                <td>
                    <button>OK</button><button>Apply</button>
                </td>
            </tr>
        </table>
    </div>

[AndyParticipant]

Hi Pete,

Yeah sorry about that.. 5000 a typo !!!! I think I’ve finally tracked down the cause of the issue but still don’t have a very good resolution to it. The layout and widget use is fine. I tested the layout by stripping the code baseline back to basics. I find that the root cause is in relation to the Ajax .load function. I’m really no JavaScript expert but it looks as though this function is reloading the complete page in the background [although I’m only substituting a DIV] and removing the tree object references. I tested this by substituting the original load function,

function loadForm(htmlFile)
{
$(“.classloader”).ready(function() {
$(“#forms”).load(htmlFile + “);
});
}

with,

document.getElementById("forms").innerHTML='<object type="type/html" data="NewAttrPersist.html" ></object>';

Now this worked and the tree functioned correctly which seemed to verify that the Widget structures are okay. However I find this to be a very unsatisfactory solution as I lose all the css formatting upon this type of insertion and I am unable to workout how to reformat the inserted html.

Is this something you have seen before?
Do you have a better suggestion as to how I might approach this problem?
The preferred approach is the .load function as this seems to be the cleanest way to insert the html elements. Are there other arguments or ways of using this function?
I’m guessing that another option might be to put all page elements into one page but for me this is not a practical option and will make the code baseline very ugly and probably unmanageable into the future.

Lastly, I notice with great interest that you scheduled a TreeTable Widget due this quarter. Is this still the timeframe or will we have to wait to the new year for this functionality. This would be a great addition to the project I am currently scoping so an update on this would be greatly appreciated.

Once again thanking you for your prompt responses,

Regards,

Andy

[AndyParticipant]

Last Go…. DIV FORMATTING NOT HELPFUL!

Pete, have reviewed the examples quite extensively to get to this point but am not entirely sure whether what I have is aligned to the basic requirement for splitters. My main html entry point is this….I think I have the splitter structure you described 1 main and 2 nested….

$(document).ready(function() {
$(“#jqxMainMenu”).jqxMenu({width: ‘5000’, height: ’30’, mode: ‘horizontal’, showTopLevelArrows: true});
$(“#jqxMainMenu”).jqxMenu(‘setItemOpenDirection’, ‘Services’, ‘left’, ‘down’);
$(“#jqxMainMenu”).jqxMenu(‘setItemOpenDirection’, ‘ContactUs’, ‘left’, ‘down’);
$(“#jqxMainMenu”).css(‘visibility’, ‘visible’);
});

DIV id=”menubar”>/DIV

DIV id=”MainSplitContainer”>
DIV
DIV class=”jqx-hideborder jqx-hidescrollbars” id=”treetabswidget”>
UL
LI CM Class Tree/LI
LI CM Search/LI
/UL
DIV id=”treeclasstabswidget”>/DIV
DIV id=”treeclasstabswidget”>/DIV
/DIV
/DIV
DIV
DIV id=”MainRightSplitContainer”>
DIV
DIV class=”jqx-hideborder jqx-hidescrollbars” id=”treeclasspropertytabswidget”>
UL
LI General/LI
LI Attributes/LI
LI Constants/LI
LI Keys/LI
LI Methods/LI
LI Indexes/LI
/UL
DIV id=”forms”>General/DIV
DIV Attributes/DIV
DIV Constants/DIV
DIV Keys/DIV
DIV Methods/DIV
DIV Indexes/DIV
/DIV
/DIV
DIV id=”Status”>
Status Region
/DIV
/DIV
/DIV
/DIV
/BODY

I also tried putting the MENU inside the STATUS in the STATUS div to see if the same behavior exists.. and unfortunately it does!

To load the Widgets I’m using $(“#forms”).load(htmlFile);. Presumably this is an okay method to load the dividers?

[AndyParticipant]

** DIVS REMOVED !!**

Pete, have reviewed the examples quite extensively to get to this point but am not entirely sure whether what I have is aligned to the basic requirement for splitters. My main html entry point is this….I think I have the splitter structure you described 1 main and 2 nested….

$(document).ready(function() {
$(“#jqxMainMenu”).jqxMenu({width: ‘5000’, height: ’30’, mode: ‘horizontal’, showTopLevelArrows: true});
$(“#jqxMainMenu”).jqxMenu(‘setItemOpenDirection’, ‘Services’, ‘left’, ‘down’);
$(“#jqxMainMenu”).jqxMenu(‘setItemOpenDirection’, ‘ContactUs’, ‘left’, ‘down’);
$(“#jqxMainMenu”).css(‘visibility’, ‘visible’);
});

div>

div>
div>
div>
CM Class Tree
CM Search
div>
div>
/div>
/div>
div>
div>
div>
div>

General
Attributes
Constants
Keys
Methods
Indexes

div>General
div>Attributes
div>Constants
div>Keys
div>Methods
div>Indexes
/div>
/div>
div>
Status Region
/div>
div>
/div>
div>

I also tried putting the inside the in the div to see if the same behavior exists.. and unfortunately it does!

To load the Widgets I’m using $(“#forms”).load(htmlFile);. Presumably this is an okay method to load the dividers?

[AndyParticipant]

Didn’t expect that quicker reply!

Pete, have reviewed the examples quite extensively to get to this point but am not entirely sure whether what I have is aligned to the basic requirement for splitters. My main html entry point is this….I think I have the splitter structure you described 1 main and 2 nested….

$(document).ready(function() {
$(“#jqxMainMenu”).jqxMenu({width: ‘5000’, height: ’30’, mode: ‘horizontal’, showTopLevelArrows: true});
$(“#jqxMainMenu”).jqxMenu(‘setItemOpenDirection’, ‘Services’, ‘left’, ‘down’);
$(“#jqxMainMenu”).jqxMenu(‘setItemOpenDirection’, ‘ContactUs’, ‘left’, ‘down’);
$(“#jqxMainMenu”).css(‘visibility’, ‘visible’);
});

CM Class Tree
CM Search

General
Attributes
Constants
Keys
Methods
Indexes

General

Attributes

Constants

Keys

Methods

Indexes

Status Region

I also tried putting the inside the in the div to see if the same behavior exists.. and unfortunately it does!

To load the Widgets I’m using $(“#forms”).load(htmlFile);. Presumably this is an okay method to load the dividers?

[Author]

Posts