Revise hidden tree expansion test; fix rest of issue

SitePen · Jun 5, 2012 · 5e518e1 · 5e518e1
1 parent 2dcc190
commit 5e518e1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git a/test/Render_hidden.html b/test/Render_hidden.html
@@ -35,32 +35,32 @@
 						{label:'Population', field:'population'},
 						{label:'Timezone', field:'timezone'}
 					];
-					var count = 0;
 
-					window.tree = declare([Grid, Keyboard, Selection])({
+					var grid = window.grid = declare([Grid, Keyboard, Selection])({
 						store: testCountryStore,
 						query: {type: "continent"},
 						columns: columns
-					}, "tree");
+					}, "grid");
 
-					on(document.getElementById("unhideButton"), "click", function(event){
-						document.getElementById("hiddenTree").style.display = "block";
-						document.getElementById("reloadButton").style.display = "";
-						event.target.style.display = "none";
+					on(document.getElementById("toggle"), "click", function(event){
+						var node = document.getElementById("hiddenTree"),
+							display = node.style.display;
+
+						node.style.display = display ? "" : "none";
 					});
-
-					on(document.getElementById("reloadButton"), "click", function(){
-						window.location.reload();
+					
+					on(document.getElementById("expandAF"), "click", function(event){
+						grid.expand("AF");
 					});
 				});
 		</script>
 	</head>
 	<body class="claro">
-		<h2>Tree grid rendered in a hidden node (display:none)</h2>
-		<div id="hiddenTree" style="display: none;">
-			<div id="tree"></div>
+		<h2>Tree grid rendered in a hideable node (to test expansion while hidden)</h2>
+		<button id="toggle">Toggle hide/show</button>
+		<button id="expandAF">Toggle Africa expansion</button>
+		<div id="hiddenTree">
+			<div id="grid"></div>
 		</div>
-		<button id="unhideButton">Un-hide</button>
-		<button id="reloadButton" style="display: none;">Reload Page</button>
 	</body>
 </html>
diff --git a/tree.js b/tree.js
@@ -114,7 +114,7 @@ return function(column){
 
 			var row = target.element ? target : grid.row(target);
 
-			target = target.element || target; // if a row object was passed in, get the element first 
+			target = row.element;
 			target = target.className.indexOf("dgrid-expando-icon") > -1 ? target :
 				querySelector(".dgrid-expando-icon", target)[0];
 
@@ -145,7 +145,8 @@ return function(column){
 						function(){
 							// Expand once results are retrieved, if the row is still expanded.
 							if(grid._expanded[row.id]){
-								container.style.height = container.scrollHeight + "px";
+								var scrollHeight = container.scrollHeight;
+								container.style.height = scrollHeight ? scrollHeight + "px" : "auto";
 							}
 						}
 					);
@@ -182,33 +183,36 @@ return function(column){
 						}, 600);
 					}
 				}
-				// show or hide all the children
+
+				// Show or hide all the children.
 
 				container = rowElement.connected;
-				var containerStyle = container.style;
 				container.hidden = !expanded;
+				var containerStyle = container.style,
+					scrollHeight;
+
 				// make sure it is visible so we can measure it
 				if(transitionEventSupported === false || noTransition){
 					containerStyle.display = expanded ? "block" : "none";
 					containerStyle.height = "";
 				}else{
 					if(expanded){
 						containerStyle.display = "block";
-						var scrollHeight = container.scrollHeight;
+						scrollHeight = container.scrollHeight;
 						containerStyle.height = "0px";
 					}
 					else{
-						// if it will be hidden we need to be able to give a full height without animating it, so it has the right starting point to animate to zero
+						// if it will be hidden we need to be able to give a full height
+						// without animating it, so it has the right starting point to animate to zero
 						put(container, ".dgrid-tree-resetting");
 						containerStyle.height = container.scrollHeight + "px";
 					}
-					// we now allow a transitioning						
-					if(!expanded || scrollHeight){
-						setTimeout(function(){
-							put(container, "!dgrid-tree-resetting");
-							containerStyle.height = (expanded ? scrollHeight : 0) + "px";
-						});
-					}
+					// Perform a transition for the expand or collapse.
+					setTimeout(function(){
+						put(container, "!dgrid-tree-resetting");
+						containerStyle.height =
+							expanded ? (scrollHeight ? scrollHeight + "px" : "auto") : "0px";
+					});
 				}
 
 				// Update _expanded map.