jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 31 through 45 (of 108 total)

← 1 2 3 4 … 8 →

Author

Posts

January 17, 2013 at 3:13 pm in reply to: Renaming Tabs w/ HTML title Renaming Tabs w/ HTML title #13805

shimmoril

Participant

Thank you SO MUCH Dimitar! This works perfectly. I really appreciate your help on this issue.

January 16, 2013 at 3:03 pm in reply to: Percentage Grid Sizing & Paging Percentage Grid Sizing & Paging #13708

shimmoril

Participant

Thank you.

January 16, 2013 at 3:00 pm in reply to: Renaming Tabs w/ HTML title Renaming Tabs w/ HTML title #13707

shimmoril

Participant

Is it possible for you to provide the HTML for the close button? I can’t just remove the tab and recreate it every time the user makes a change.

January 16, 2013 at 2:57 pm in reply to: Tree/Tabs Bug Tree/Tabs Bug #13706

shimmoril

Participant

This works perfectly, thanks.

January 15, 2013 at 5:25 pm in reply to: Renaming Tabs w/ HTML title Renaming Tabs w/ HTML title #13646

shimmoril

Participant

Okay, I was able to rename the tab while passing the FontAwesome HTML, but now the close button is gone. Neither of these code snippits restores it:

$('#jqxTabs').find("ul li").eq(current_tab).attr('hasclosebutton', 'true');
$('#jqxTabs').jqxTabs('showCloseButtonAt', current_tab);

I was previously using the showCloseButtonAt with the setTitleAt, so I dont think it’s the same issue brought up in the linked thread.

January 15, 2013 at 2:57 pm in reply to: Percentage Grid Sizing & Paging Percentage Grid Sizing & Paging #13644

shimmoril

Participant

I just noticed this: “Columns Widths are working as expected before and after resizing the browser’s window.” That’s not the issue I described. Set up the grid to use % widths. Set it up to do paging. Change the page size (ie. from 20 to 50). Now each column is hugely wide. It has nothing to do w/ changing the browser size.

January 15, 2013 at 2:53 pm in reply to: Saving Tabs in Cookies Saving Tabs in Cookies #13643

shimmoril

Participant

Thanks Dimitar. Is there a particular reason it won’t work for the dynamically-created tabs? Unless we can get that to work, this option is basically useless to us. The whole point is to maintain the user’s selections if the page refreshes.

January 15, 2013 at 2:48 pm in reply to: Renaming Tabs w/ HTML title Renaming Tabs w/ HTML title #13642

shimmoril

Participant

Why is it possible to pass through HTML when creating a tab but not renaming it? Seems like a bug that they don’t accept the same content.

For the example you showed me, I assume if I change it to search for a specific LI, based on the current_tab index, I can target my tabs appropriately?

January 15, 2013 at 2:45 pm in reply to: Tree/Tabs Bug Tree/Tabs Bug #13641

shimmoril

Participant

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.

January 14, 2013 at 8:59 pm in reply to: Percentage Grid Sizing & Paging Percentage Grid Sizing & Paging #13599

shimmoril

Participant

What exactly did you change? Is it just the addition of the pager callback function? If I add that (and only that) to my posted example it doesn’t fix the problem. It would be helpful if you just modified my example, then I could just compare line-by-line.

January 14, 2013 at 5:40 pm in reply to: Renaming Tabs w/ HTML title Renaming Tabs w/ HTML title #13593

shimmoril

Participant

I specifically said I was passing through HTML as the new tab name, not just text.

In the example below we are using FontAwesome icons on our tab labels. If you click an item in the tree, the tab is correctly created w/ the icon in front of the text. If you then click the Rename tab link, the tab is renamed, but the HTML for the icon comes through instead of the image.

<html>
	<head>
		<link rel="stylesheet" href="/javascript/jqwidgets/2.6.0/styles/jqx.base.css" type="text/css" />
		<link rel="stylesheet" href="/user/includes/font-awesome/3.0.0/css/font-awesome.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">
			var current_tab = 0;
			
			
			$(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
				});
				
				$('#jqxTabs').bind('selected', function(event){
					current_tab = event.args.item;
				});
				
				$('#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;					
					var length = $('#jqxTabs').jqxTabs('length');	
		
					//add the new tab to the end
					$('#jqxTabs').jqxTabs('addLast', '<i class="fa-icon-info-sign"></i>' + treeLabel, '<div><a href="javascript: renameTab();">Rename Tab</a></div>');
					
					//make sure the newly added tab is visible in the tab bar
					$('#jqxTabs').jqxTabs('ensureVisible', length);
				})
			});
			
			function renameTab() { 
				//this will be called from the iframes on a successful save; changes the name of the tab to match what was saved
				$('#jqxTabs').jqxTabs('setTitleAt', current_tab, '<i class="fa-icon-ok-sign"></i> New tab name ' + current_tab);
				
				//the close button disappears on rename; re-show it 
				$('#jqxTabs').jqxTabs('showCloseButtonAt', current_tab);
			}
		</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>
							<a href="javascript: renameTab();">Rename Tab</a>
						</div>
					</div>			
				</div>
			</div>
		</div>
	</body>
</html>

January 14, 2013 at 5:24 pm in reply to: Tree/Tabs Bug Tree/Tabs Bug #13592

shimmoril

Participant

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>

January 14, 2013 at 3:26 pm in reply to: Long Tree Long Tree #13581

shimmoril

Participant

Thanks.

January 11, 2013 at 3:33 pm in reply to: Long Tree Long Tree #13519

shimmoril

Participant

Thanks Dimitar. I was playing around with this further yesterday and noticed that while I can specify a height in px for the tree, it won’t take a percentage height for some reason. Do you know why this might be?

(When I have it set to a percentage height none of the content is displayed)

January 11, 2013 at 2:57 pm in reply to: Tree/Tabs Bug Tree/Tabs Bug #13517

shimmoril

Participant

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.

Author

Posts

Viewing 15 posts - 31 through 45 (of 108 total)

← 1 2 3 4 … 8 →