Add refreshFolder method to tree

- adds isBackgroundProcess parameter to populate

index.html

@@ -2241,6 +2241,7 @@ <h3>only items selectable (please note structure of treebranch)</h3>
 					<button type="button" class="btn btn-default" id="btnTreeDiscloseAll">disclose all</button>
 					<button type="button" class="btn btn-default" id="btnTreeCloseAll">close all</button>
 					<button type="button" class="btn btn-default" id="btnTreeValue">log selected items</button>
+					<button type="button" class="btn btn-default" id="btnTreeRefresh">refresh an already opened item</button>
 				</div>
 			</section>
 

index.js

@@ -1207,6 +1207,18 @@ define(function (require) {
 		console.log($('#myTree1').tree('selectedItems'));
 	});
 
+	var mostRecentlyOpenedFolderId = null;
+	$('#btnTreeRefresh').click(function () {
+		if (mostRecentlyOpenedFolderId === null) {
+			log('Please open a folder first. This is only needed for already opened and "DOM cached" folders.');
+		}
+		else {
+			var $itemToRefresh = $('#'+mostRecentlyOpenedFolderId)
+			$('#myTree1').tree('refreshFolder', $itemToRefresh);
+		}
+
+	});
+
 	// events
 	$('#myTree1').on('loaded.fu.tree', function (e) {
 		log('#myTree1 Loaded');
@@ -1223,6 +1235,7 @@ define(function (require) {
 		log($('#myTree1').tree('selectedItems'));
 	});
 	$('#myTree1').on('disclosedFolder.fu.tree', function (event, parentData) {
+		mostRecentlyOpenedFolderId = parentData.attr.id;
 		log('Opened Event, parent data: ', parentData);
 	});
 	$('#myTree1').on('closed.fu.tree', function (event, parentData) {
@@ -1240,6 +1253,9 @@ define(function (require) {
 	$('#myTree1').on('disclosedAll.fu.tree', function (event, data) {
 		log('Disclosed All, this many recursions: ', data.disclosures);
 	});
+	$('#myTree1').on('refreshedFolder.fu.tree', function (event, parentData) {
+		log('Refreshed Folder Event: ', parentData);
+	});
 
 	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 	 SUPERPICKER

js/tree.js

@@ -87,13 +87,16 @@
 			this.populate(this.$element);
 		},
 
-		populate: function populate($el) {
+		populate: function populate($el, isBackgroundProcess) {
 			var self = this;
 			var $parent = ($el.hasClass('tree')) ? $el : $el.parent();
 			var loader = $parent.find('.tree-loader:eq(0)');
 			var treeData = $parent.data();
+			isBackgroundProcess = isBackgroundProcess || false;	// no user affordance needed (ex.- "loading")
 
-			loader.removeClass('hide hidden'); // hide is deprecated
+			if (isBackgroundProcess === false) {
+				loader.removeClass('hide hidden'); // hide is deprecated
+			}
 			this.options.dataSource(treeData ? treeData : {}, function (items) {
 				loader.addClass('hidden');
 
@@ -423,9 +426,27 @@
 				}
 
 			}
+		},
+
+		// This refreshes the children of a folder. Please destroy and re-initilize for "root level" refresh.
+		// The data of the refreshed folder is not updated. This control's architecture only allows updating of children.
+		// Folder renames should probably be handled directly on the node.
+		refreshFolder: function refreshFolder($el) {
+			var $treeFolder = $el.closest('.tree-branch');
+			var $treeFolderChildren = $treeFolder.find('.tree-branch-children');
+			$treeFolderChildren.eq(0).empty();
+
+			if ($treeFolder.hasClass('tree-open')) {
+				this.populate($treeFolderChildren, false);
+			}
+			else {
+				this.populate($treeFolderChildren, true);
+			}
+
+			this.$element.trigger('refreshedFolder.fu.tree', $treeFolder.data());
 		}
-	};
 
+	};
 
 	// ALIASES
 

test/tree-test.js

@@ -15,6 +15,15 @@ define(function (require) {
 			var callLimit = 50;
 			var callCount = 0;
 
+			function guid () {
+				function s4 () {
+					return Math.floor((1 + Math.random()) * 0x10000)
+						.toString(16)
+						.substring(1);
+				}
+				return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+			}
+
 			this.dataSource = function (options, callback) {
 				if (callCount >= callLimit) {
 					callback({
@@ -39,22 +48,22 @@ define(function (require) {
 							name: 'Ascending and Descending',
 							type: 'folder',
 							attr: {
-								id: 'folder1'
+								id: 'folder' + guid(),
 							}
 						},
 						{
 							name: 'Sky and Water I (with custom icon)',
 							type: 'item',
 							attr: {
-								id: 'item1',
+								id: 'folder' + guid(),
 								'data-icon': 'glyphicon glyphicon-file'
 							}
 						},
 						{
 							name: 'Drawing Hands',
 							type: 'folder',
 							attr: {
-								id: 'folder2',
+								id: 'folder' + guid(),
 								'data-children': false
 							}
 						},
@@ -69,7 +78,7 @@ define(function (require) {
 							name: 'Belvedere',
 							type: 'folder',
 							attr: {
-								id: 'folder3'
+								id: 'folder' + guid(),
 							}
 						},
 						{
@@ -84,7 +93,7 @@ define(function (require) {
 							name: 'House of Stairs',
 							type: 'folder',
 							attr: {
-								id: 'folder4'
+								id: 'folder' + guid(),
 							}
 						},
 						{
@@ -111,6 +120,7 @@ define(function (require) {
 					]
 				});
 			};
+
 		}
 	});
 
@@ -365,6 +375,27 @@ define(function (require) {
 		$tree.tree('discloseAll');
 	});
 
+	test("should refresh an already opened/cached folder with new nodes", function () {
+		var $tree = $(html).find('#MyTree');
+		var $folderToRefresh;
+		var initialLoadedFolderId, refreshedLoadedFolderId;
+		var selector = '.tree-branch-children > li:eq(0)';
+
+		$tree.tree({
+			dataSource: this.dataSource
+		});
+		$folderToRefresh = $tree.find('.tree-branch:eq(1)');
+
+		// open folder
+		$tree.tree('discloseFolder', $folderToRefresh.find('.tree-branch-name'));
+		equal($folderToRefresh.find('.tree-branch-children > li').length, 8, 'Folder has been populated with items/sub-folders');
+		initialLoadedFolderId = $folderToRefresh.find(selector).attr('id');
+
+		// refresh and see if it's the same ID
+		$tree.tree('refreshFolder', $folderToRefresh);
+		refreshedLoadedFolderId = $folderToRefresh.find('.tree-branch-children > li:eq(0)').attr('id');
+		notEqual(refreshedLoadedFolderId, initialLoadedFolderId, 'Folder has been refreshed and populated with different items/sub-folders');
+	});
 
 	test("should destroy control", function () {
 		var $tree = $(html).find('#MyTree');