jQWidgets Forums
jQuery UI Widgets › Forums › Getting Started › Problem with jqxSplitter with jqxTree
Tagged: jqwidgets controls, splitter control, tree control
This topic contains 11 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 6 months ago.
-
Author
-
As a precursor to purchasing this JScript library I have been evaluating the performance and ease-of-use of these utilities. I am impressed with the scope, performance and rapid implementation of these tools but have hit a fairly annoying issue with my test application.
I have a 3 splitter screen containing multiple tabs in each. One of the splitter frames holds a Tree and the other frames are used for both Grid and Standard dialog windows. I am also using a JQMenu above the Splitter window configuration.
The Tree frame has a Pop-Up which functions as expected when initially loaded. Each menu option calls JavaScript to execute each particular function. Perfect!
The problem starts when I change the content of an adjacent frame. In one case, adding a standard HTML form into a Corresponding Tab Divider. As soon as I do this and whilst I can still expand and collapse the Tree nodes, with the Pop-Up Menu still appearing and the JavaScript being called, the [SelectedItem] Object from the Tree is now undefined when I run the same Menu options. Initially I thought it was something to do with Frame Focus but after trying a number of options including a Select listener to regain focus and refresh I still have the same problem.
The application is structured from a main html page holding the nested splitter dividers, each divided with <div id’s> into which the relevant JQ Widgets are loaded. Each Widget is loaded using,
$(“#forms”).load(htmlFile + “?enSureReload=” + enSurePageReload);
from a separate HTML file containing the Main Menu definition. The Tree is loaded in a similar way. I have no idea whether this is a basic structure problem or whether this might be a known issue using the splitter and sub-division of widgets in this way.
I’m sure someone must have come across a similar issue so any advice would be gratefully received.
Many Thanks
Hi plmandyb,
The splitter’s structure includes one Main DIV tag and 2 nested DIV tags. The content which you want to display within the splitter should go to its nested DIV tags. You should not modify or initialize a widget from the Splitter’s Nested DIV tags. I also suggest you to look at the multiple demos available on our web site about jqxSplitter and its integration with other widgets.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/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 SearchGeneral
Attributes
Constants
Keys
Methods
IndexesGeneralAttributesConstantsKeysMethodsIndexesStatus RegionI 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?
** 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
Indexesdiv>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?
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
/BODYI 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?
Hi plmandyb,
Could you repost the code, but this time use the toolbar’s Code Formatting Button – the one with {} i.e select the code and press the button. Looking forward to your reply. I also do not understand why you set the Menu’s Width to 5000px. As far as I know that would not look very well on normal Screens.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/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
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;"><MainPage.html></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;"><menu.html></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;"><FormFile.html></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>
Hi plmandyb,
I’ve prepared a small sample based on your code which adds the Menu to the Main page.
Main.htm
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.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/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <style> body, html { padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; } </style> <script> $(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"); }); </script></head><body> <div style="width: 100%; z-index: 2; height: 30px; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute;" id="menubar"> </div> <div style="-moz-box-sizing: border-box; z-index: 1; position: absolute; box-sizing: border-box; width: 100%; height: 100%; padding-top: 30px;"> <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> </div></body></html>
Menu.htm
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#jqxMainMenu").jqxMenu({ width: '100%', 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); }); } </script></head><body> <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></body></html>
Hope this helps.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/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>
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
Hi Andy,
I suppose that your last post is about the same as this new topic: http://www.jqwidgets.com/community/topic/tree-content-is-nullified-after-load-ajax-call/#post-32920
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.