jQuery UI Widgets › Forums › Navigation › Tree › Tree/Tabs Bug
This topic contains 8 replies, has 2 voices, and was last updated by shimmoril 11 years, 8 months ago.
-
AuthorTree/Tabs Bug Posts
-
I’ve got a page w/ splitter, tree and tabs. The tree is on the left, the tabs are on the right. Clicking an item in the tree opens a tab w/ iframe content. If someone clicks a tree item and closes the opened tab, clicking the same tree item again doesn’t reopen the tab – in fact it does nothing. I’m assuming this is because the tree thinks the item is already selected, so it doesn’t select it again. How can I fix this?
Hello shimmoril,
When you close a tab using its close button, the HTML elements which comprise it are removed from the DOM. Thus, there is no way of opening the tab again.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Re-opening the tab is not the problem I am describing. I can reopen the tab – providing I click on another item and then click on the first item again. The issue isn’t with reopening the tab per se, it’s with clearing the selected item in the tree.
Clicking an item in the tree selects it. It also triggers an event that opens a tab. Regardless of whether the tab is still open the tree item remains selected, which means the tab open event never fires on subsequent clicks. What I would like is to de-select the tree item after the tab is opened.
Hi shimmoril,
Could you, please, provide us with a code sample, which we may test locally?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Click Item 1 (or any item). A tab opens and it is visibly ‘selected’ in the tree. Try clicking the same item again. Nothing happens. Since it’s already/still ‘selected’ as far as the tree is concerned, the select event can’t fire again.
<html> <head> <link rel="stylesheet" href="/javascript/jqwidgets/2.6.0/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="/Javascript/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxcore.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxdata.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxbuttons.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxscrollbar.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxpanel.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxtree.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxtabs.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxsplitter.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ''; $("#splitter").jqxSplitter({ theme: theme, panels: [{min: 190, max: 290, size: '25%'}, {min: 570, max: 870, size: '75%'}], height: '100%' }); $('#jqxTabs').jqxTabs({ theme: theme, width: '100%', height: '100%', position: 'top', showCloseButtons: true, reorder: true, scrollPosition: 'both', selectionTracker: true }); $('#nav_tree').jqxTree({ theme: theme, width: '100%', height: '500px' }); $('#nav_tree').bind('select', function(event){ var src = ''; var args = event.args; //get the clicked tree item var item = $('#nav_tree').jqxTree('getItem', args.element); //get the clicked tree item's label (text) so the tab title can be set var treeLabel = item.label; //NONE OF THIS WORKS SINCE THE DEMO ISNT GENERATING THE TREE VIA XML //the id for each tree item contains three values, separated by dashes: 1. the type 2. the database id 3. the parent row id //separate the tree id so the item's type and database id can be retrieved and used to create a tab w/ the correct data //var id_parts = item.value.split('-', 3); //var type = id_parts[0]; //var treeID = id_parts[1]; //var src = 'http://www.test.com' + treeID; var length = $('#jqxTabs').jqxTabs('length'); //add the new tab to the end $('#jqxTabs').jqxTabs('addLast', treeLabel, '<div><iframe src="http://www.jqwidgets.com"/></div>'); //make sure the newly added tab is visible in the tab bar $('#jqxTabs').jqxTabs('ensureVisible', length); }) }); </script> </head> <body> <div> <div id="splitter"> <div class="tree-navigation"> <div id="nav_tree"> <ul> <li value="10"> Item 1 <ul> <li>Child 1</li> <li>Child 2</li> </ul> </li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> </div> <div id="ContentPanel"> <div id='jqxTabs'> <ul id="unorderedList"> <li>First Tab</li> </ul> <div> <iframe id="lm-iframe" src="http://www.jqwidgets.com"></iframe> </div> </div> </div> </div> </div> </body></html>
Hi shimmoril,
When a tree item is selected it stays selected until another item is selected. In this case the select event is different from the click event.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Yes, I am aware that that’s the default functionality. My original question was if there was some way to ‘unselect’ a tree item programmatically, so I could call it after opening the tab.
Hi shimmoril,
Here is how to unselect a tree item:
$('#jqxTree').jqxTree('selectItem', null);Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/This works perfectly, thanks.
-
AuthorPosts
You must be logged in to reply to this topic.