fit-ui 2.3.5 → 2.5.1

package/dist/Fit.UI.js

@@ -648,7 +648,7 @@ Fit._internal =
 {
 	Core:
 	{
-		VersionInfo: { Major: 2, Minor: 3, Patch: 5 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
+		VersionInfo: { Major: 2, Minor: 5, Patch: 1 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
 	}
 };
 
@@ -3048,6 +3048,8 @@ Fit.Controls.Component = function(controlId)
 		container = document.createElement("div");
 		container.id = id;
 		container._internal = { Instance: me };
+
+		Fit.Dom.Data(container, "device", ((Fit.Browser.GetInfo().IsMobile === false) ? "Desktop" : (Fit.Browser.GetInfo().IsPhone === true) ? "Phone" : "Tablet"));
 	}
 
 	/// <function container="Fit.Controls.Component" name="GetId" access="public" returns="string">
@@ -3278,8 +3280,6 @@ Fit.Controls.ControlBase = function(controlId)
 		me._internal.Data("dirty", "false");
 		me._internal.Data("enabled", "true");
 
-		me._internal.Data("device", ((Fit.Browser.GetInfo().IsMobile === false) ? "Desktop" : (Fit.Browser.GetInfo().IsPhone === true) ? "Phone" : "Tablet"));
-
 		// Add hidden inputs which are automatically populated with
 		// control value and state information when control is updated.
 
@@ -15793,6 +15793,8 @@ Fit.Controls.DropDown = function(ctlId)
 	var focusInputOnMobile = true;				// Flag indicating whether control should focus input fields (and potentially bring up a virtual keyboard) based on configuration, platform (computer vs touch) and where user initially clicked/touched DropDown to activate it
 	var detectBoundaries = false;				// Flag indicating whether drop down menu should detect viewport collision and open upwards when needed
 	var detectBoundariesRelToViewPort = false;	// Flag indicating whether drop down menu should be positioned relative to viewport (true) or scroll parent (false)
+	var persistView = false;					// Flag indicating whether picker controls should remember and restore its scroll position and highlighted item when reopened
+	var highlightFirst = false;					// Flag indicating whether picker controls should focus its first node automatically when opened
 
 	var onInputChangedHandlers = [];			// Invoked when input value is changed - takes two arguments (sender (this), text value)
 	var onPasteHandlers = [];					// Invoked when a value is pasted - takes two arguments (sender (this), text value)
@@ -15922,8 +15924,15 @@ Fit.Controls.DropDown = function(ctlId)
 			{
 				var target = Fit.Events.GetTarget(e);
 
+				if (target !== document.documentElement && target !== document.body && Fit.Dom.IsRooted(target) === false)
+				{
+					return; // Do not close DropDown if target no longer exists - this may happen if something is removed within DropDown (e.g. an item in the WSDropDown's action menu)
+				}
+
 				if (me.IsDropDownOpen() === true && target !== me.GetDomElement() && Fit.Dom.Contained(me.GetDomElement(), target) === false)
+				{
 					me.CloseDropDown();
+				}
 			});
 			Fit.Array.Add(closeHandlers, eventId);
 		}
@@ -15940,6 +15949,11 @@ Fit.Controls.DropDown = function(ctlId)
 
 				coords = null;
 
+				if (target !== document.documentElement && target !== document.body && Fit.Dom.IsRooted(target) === false)
+				{
+					return; // Do not close DropDown if target no longer exists - this may happen if something is removed within DropDown (e.g. an item in the WSDropDown's action menu)
+				}
+
 				if (me.IsDropDownOpen() === true && target !== me.GetDomElement() && Fit.Dom.Contained(me.GetDomElement(), target) === false)
 				{
 					coords = Fit.Events.GetPointerState().Coordinates.Document;
@@ -16256,7 +16270,7 @@ Fit.Controls.DropDown = function(ctlId)
 			itemDropZones[key].Dispose();
 		});
 
-		me = itemContainer = itemCollection = itemDropZones = arrow = txtPrimary = txtActive = txtEnabled = dropDownMenu = picker = orgSelections = invalidMessage = invalidMessageChanged = initialFocus = maxHeight = prevValue = focusAssigned = closeHandlers = dropZone = isMobile = focusInputOnMobile = detectBoundaries = onInputChangedHandlers = onPasteHandlers = onOpenHandlers = onCloseHandlers = suppressUpdateItemSelectionState = suppressOnItemSelectionChanged = clearTextSelectionOnInputChange = prevTextSelection = textSelectionCallback = cmdToggleTextMode = null;
+		me = itemContainer = itemCollection = itemDropZones = arrow = txtPrimary = txtActive = txtEnabled = dropDownMenu = picker = orgSelections = invalidMessage = invalidMessageChanged = initialFocus = maxHeight = prevValue = focusAssigned = closeHandlers = dropZone = isMobile = focusInputOnMobile = detectBoundaries = detectBoundariesRelToViewPort = persistView = highlightFirst = onInputChangedHandlers = onPasteHandlers = onOpenHandlers = onCloseHandlers = suppressUpdateItemSelectionState = suppressOnItemSelectionChanged = clearTextSelectionOnInputChange = prevTextSelection = textSelectionCallback = cmdToggleTextMode = null;
 
 		base();
 	});
@@ -16468,6 +16482,11 @@ Fit.Controls.DropDown = function(ctlId)
 		picker.MaxHeight(maxHeight.Value, maxHeight.Unit);
 		optimizeDropDownPosition(); // In case dropdown is already open and SetPicker was called async, e.g. initiated from OnOpen event. Function may change MaxHeight on Picker.
 
+		// Persist view and initial focus
+
+		picker.PersistView(persistView);
+		picker.HighlightFirst(highlightFirst);
+
 		// Make sure OnItemSelectionChanged is only registered once
 
 		if (!picker._internal)
@@ -16525,6 +16544,19 @@ Fit.Controls.DropDown = function(ctlId)
 				if (txt.parentElement.parentElement === null)
 					txt = txtPrimary;
 			}
+			else
+			{
+				// User selected an item which is already selected
+
+				if (me.TextSelectionMode() === true)
+				{
+					updateTextSelection(); // Make sure any search value is removed and text selection is restored
+				}
+				else
+				{
+					me.ClearInput(); // Make sure any search value is removed
+				}
+			}
 
 			// DISABLED: Now handled using picker.OnFocus(..) handler further down - see https://github.com/Jemt/Fit.UI/issues/86 for details
 			// if (eventArgs.ProgrammaticallyChanged === false && (isMobile === false || focusInputOnMobile === true))
@@ -16845,6 +16877,48 @@ Fit.Controls.DropDown = function(ctlId)
 		return null;
 	}
 
+	/// <function container="Fit.Controls.DropDown" name="PersistView" access="public" returns="boolean">
+	/// 	<description> Make DropDown restore scroll position and previously highlighted item when reopened </description>
+	/// 	<param name="val" type="boolean" default="undefined"> If set, True enables feature, False disables it (default) </param>
+	/// </function>
+	this.PersistView = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true && val !== persistView)
+		{
+			persistView = val;
+
+			if (me.GetPicker() !== null)
+			{
+				me.GetPicker().PersistView(val);
+			}
+		}
+
+		return persistView;
+	}
+
+	/// <function container="Fit.Controls.DropDown" name="HighlightFirst" access="public" returns="boolean">
+	/// 	<description> Make DropDown highlight first selectable item when opened </description>
+	/// 	<param name="val" type="boolean" default="undefined"> If set, True enables feature, False disables it (default) </param>
+	/// </function>
+	this.HighlightFirst = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			highlightFirst = val;
+
+			if (me.GetPicker() !== null)
+			{
+				me.GetPicker().HighlightFirst(val);
+			}
+		}
+
+		return highlightFirst;
+	}
+
 	/// <function container="Fit.Controls.DropDown" name="RenameSelection" access="public">
 	/// 	<description> Rename title of selected item by its value </description>
 	/// 	<param name="val" type="string"> Value of selected item to rename </param>
@@ -17354,6 +17428,34 @@ Fit.Controls.DropDown = function(ctlId)
 		Fit.Array.Add(onCloseHandlers, cb);
 	}
 
+	// ============================================
+	// Protected
+	// ============================================
+
+	this._internal = (this._internal ? this._internal : {});
+
+	// Clear input field without firing OnInputChanged, and make placeholder appear
+	this._internal.ClearInputAndShowPlaceholder = function(forceFocusInput)
+	{
+		Fit.Validation.ExpectBoolean(forceFocusInput, true);
+
+		txtPrimary.value = "";
+		updatePlaceholder(true);
+
+		if (forceFocusInput)
+		{
+			// By default focus is never assigned to input on mobile if user opened the
+			// DropDown by clicking the arrow icon. ForceFocusInput allows us to ignore this
+			// aspect. On desktop the input field always remains focused  as it automatically
+			// steals back focus immediately after interacting with a picker control. See
+			// picker.OnFocusIn handler registered in SetPicker(..)
+			var orgFocusInputOnMobile = focusInputOnMobile;
+			focusInputOnMobile = true;
+			focusInput(txtActive);
+			focusInputOnMobile = orgFocusInputOnMobile;
+		}
+	}
+
 	// ============================================
 	// Private
 	// ============================================
@@ -18133,7 +18235,7 @@ Fit.Controls.DropDown = function(ctlId)
 
 		if (placeholder !== "" || force === true)
 		{
-			var setPlaceholder = placeholder !== "" && itemCollectionOrdered.length === 0 && me.GetInputValue() === "" && willAssumeInputValue !== true;
+			var setPlaceholder = placeholder !== "" && (me.TextSelectionMode() === true || itemCollectionOrdered.length === 0) && me.GetInputValue() === "" && willAssumeInputValue !== true;
 
 			Fit.Dom.Data(itemContainer, "placeholder", setPlaceholder === true ? placeholder : null);
 			Fit.Dom.Data(itemContainer, "placeholder-autoclear", setPlaceholder === true ? Fit.Browser.GetBrowser() === "MSIE" ? "true" : "false" : null);
@@ -18347,6 +18449,12 @@ Fit.Controls.DropDown = function(ctlId)
 			Fit.Dom.SetCaretPosition(txtPrimary, 0);
 		}
 
+		// Remove placeholder in case it was added using this._internal.ClearInputAndShowPlaceholder()
+
+		updatePlaceholder(true);
+
+		// Have TextSelection removed when input is changed
+
 		clearTextSelectionOnInputChange = true;
 	}
 
@@ -18829,6 +18937,32 @@ Fit.Controls.PickerBase = function()
 		return null;
 	}
 
+	/// <function container="Fit.Controls.PickerBase" name="PersistView" access="public" returns="boolean">
+	/// 	<description>
+	/// 		Overridden by control developers (optional).
+	/// 		This function can be used to tell the picker control to persist (remember) its current state between interactions.
+	/// 		For instance a TreeView control would remembers its scroll position and highlighted node, while a calendar would
+	/// 		remember the previously selected year and month.
+	/// 	</description>
+	/// 	<param name="val" type="boolean" default="undefined"> If set, True enables feature, False disables it (default) </param>
+	/// </function>
+	this.PersistView = function(val)
+	{
+		return false;
+	}
+
+	/// <function container="Fit.Controls.PickerBase" name="HighlightFirst" access="public" returns="boolean">
+	/// 	<description>
+	/// 		Overridden by control developers (optional).
+	/// 		This function can be used to make the picker control automatically highlight the first item.
+	/// 	</description>
+	/// 	<param name="val" type="boolean" default="undefined"> If set, True enables feature, False disables it (default) </param>
+	/// </function>
+	this.HighlightFirst = function()
+	{
+		return false;
+	}
+
 	/// <function container="Fit.Controls.PickerBase" name="Destroy" access="public">
 	/// 	<description>
 	/// 		Overridden by control developers (required).
@@ -18952,6 +19086,7 @@ Fit.Controls.WSDropDown = function(ctlId)
 	var me = this;
 	var list = null;
 	var tree = null;
+	var actionMenu = null;
 
 	var search = "";
 	var forceNewSearch = false;
@@ -18965,6 +19100,9 @@ Fit.Controls.WSDropDown = function(ctlId)
 	var currentRequest = null;
 	var classes = null;
 	var autoUpdatedSelections = null; // Cached result from AutoUpdateSelected: [{ Title:string, Value:string, Exists:boolean }, ...]
+	var useActionMenu = false;
+	var useActionMenuForced = false;
+	var translations = null;
 
 	var onRequestHandlers = [];
 	var onResponseHandlers = [];
@@ -19080,6 +19218,22 @@ Fit.Controls.WSDropDown = function(ctlId)
 				{
 					fireOnDataLoaded();
 				}
+
+				// If no data is returned and DropDown is in TextSelectionMode, the user will
+				// not have an easy way to remove objects from the DropDown, unless SelectionModeToggle
+				// is true. Therefore we allow for items to be removed using an action menu.
+				// EDIT: Now displays action menu in both Visual and Text Selection Mode for consistency.
+
+				if (useActionMenuForced === false)
+				{
+					useActionMenu = eventArgs.Children.length === 0;
+				}
+
+				if (/*me.TextSelectionMode() === true &&*/ useActionMenu === true)
+				{
+					updateActionMenu();
+					me.SetPicker(actionMenu);
+				}
 			}
 		});
 		tree.OnAbort(function(sender, eventArgs)
@@ -19170,6 +19324,104 @@ Fit.Controls.WSDropDown = function(ctlId)
 				me.SetPicker(tree);
 		});
 
+		// Create action menu
+
+		var skipUpdateActionMenuOnChange = false;
+
+		actionMenu = new Fit.Controls.ListView(ctlId + "__ActionsListView");
+		actionMenu.OnSelect(function(sender, item) // Using OnSelect instead of OnItemSelectionChanging since DropDown fires OnItemSelectionChanging when selection is changed, which would result in OnItemSelectionChanging being executed multiple times
+		{
+			if (item.Value === "SearchMore")
+			{
+				me._internal.ClearInputAndShowPlaceholder(true); // NOTICE: TextSelectionMode only - Visual Selection Mode cannot be temporarily cleared to display the place holder
+			}
+			else if (item.Value === "ShowAll")
+			{
+				me.SetPicker(tree);
+			}
+			else if (item.Value === "RemoveAll")
+			{
+				skipUpdateActionMenuOnChange = true;
+				me.ClearSelections(); // Fires OnChange
+				skipUpdateActionMenuOnChange = false;
+
+				updateActionMenu(); // Update action menu (remove all "Remove: xyz" options)
+			}
+			else if (item.Value.indexOf("Remove:") === 0)
+			{
+				var dataValue = item.Value.replace("Remove:", "");
+
+				// Find item below if using keyboard to remove item
+
+				var above = null;
+				var below = null;
+
+				if (Fit.Browser.GetInfo().IsMobile === false && Fit.Events.GetPointerState().Buttons.Primary === false) // Do not find and highlight item below on touch devices, or if using the mouse
+				{
+					var items = actionMenu.GetItems();
+					var stopNext = false;
+
+					for (var i = 0 ; i < items.length ; i++)
+					{
+						if (items[i].Value.indexOf("Remove:") !== 0)
+						{
+							continue; // Skip items that do not remove individual selections
+						}
+
+						if (items[i].Value.replace("Remove:", "") === dataValue)
+						{
+							stopNext = true;
+							continue;
+						}
+
+						if (stopNext === false)
+						{
+							above = items[i].Value;
+						}
+						else
+						{
+							below = items[i].Value;
+							break;
+						}
+					}
+				}
+
+				// Remove item
+
+				skipUpdateActionMenuOnChange = true;
+				me.RemoveSelection(dataValue); // Fires OnChange
+				skipUpdateActionMenuOnChange = false;
+
+				// Update list of removable items
+
+				actionMenu.RemoveItem(item.Value);
+
+				if (me.GetSelections().length === 1)
+				{
+					updateActionMenu(); // Update action menu to get rid of "Remove all" item when only one item is left
+				}
+
+				// Highlight item below (or above) the item that was just removed
+
+				if (above !== null || below !== null)
+				{
+					actionMenu.RevealItemInView(below !== null ? below : above);
+				}
+			}
+
+			return false; // Prevent selection of behavioural item
+		});
+
+		me.OnChange(function(sender)
+		{
+			if (skipUpdateActionMenuOnChange === false)
+			{
+				updateActionMenu();
+			}
+		});
+
+		// Misc
+
 		me.OnOpen(function()
 		{
 			if (suppressTreeOnOpen === true)
@@ -19178,9 +19430,19 @@ Fit.Controls.WSDropDown = function(ctlId)
 				return;
 			}
 
-			me.SetPicker(tree);
-			ensureTreeViewData();
+			if (useActionMenu === true)
+			{
+				me.SetPicker(actionMenu);
+			}
+			else
+			{
+				me.SetPicker(tree);
+				ensureTreeViewData();
+			}
 		});
+
+		Fit.Internationalization.OnLocaleChanged(localize);
+		localize();
 	}
 
 	// ============================================
@@ -19405,7 +19667,6 @@ Fit.Controls.WSDropDown = function(ctlId)
 		return base(val);
 	});
 
-
 	/// <function container="Fit.Controls.WSDropDown" name="GetListView" access="public" returns="Fit.Controls.WSListView">
 	/// 	<description> Get WSListView control used to display data in a flat list view </description>
 	/// </function>
@@ -19422,6 +19683,44 @@ Fit.Controls.WSDropDown = function(ctlId)
 		return tree;
 	}
 
+	/// <function container="Fit.Controls.WSDropDown" name="UseActionMenu" access="public">
+	/// 	<description> Get/set value indicating whether control uses the built-in action menu to ease addition and removal of items </description>
+	/// 	<param name="val" type="boolean" default="undefined"> If defined, True enables the action menu, False disables it </param>
+	/// </function>
+	this.UseActionMenu = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			useActionMenuForced = true;
+
+			if (val !== useActionMenu)
+			{
+				useActionMenu = val;
+
+				if (val === true)
+				{
+					updateActionMenu();
+
+					if (me.IsDropDownOpen() === true)
+					{
+						me.SetPicker(actionMenu);
+					}
+				}
+				else
+				{
+					if (me.GetPicker() === actionMenu)
+					{
+						me.SetPicker(tree.GetChildren().length > 0 ? tree : list);
+					}
+				}
+			}
+		}
+
+		return useActionMenu;
+	}
+
 	// See documentation on ControlBase
 	this.Dispose = Fit.Core.CreateOverride(this.Dispose, function()
 	{
@@ -19429,10 +19728,13 @@ Fit.Controls.WSDropDown = function(ctlId)
 
 		list.Destroy();
 		tree.Destroy();
+		actionMenu.Destroy();
 
 		cancelSearch();
 
-		me = list = tree = search = forceNewSearch = hideLinesForFlatData = dataRequested = dataLoading = requestCount = onDataLoadedCallback = suppressTreeOnOpen = timeOut = currentRequest = classes = autoUpdatedSelections = onRequestHandlers = onResponseHandlers = null;
+		Fit.Internationalization.RemoveOnLocaleChanged(localize);
+
+		me = list = tree = actionMenu = search = forceNewSearch = hideLinesForFlatData = dataRequested = dataLoading = requestCount = onDataLoadedCallback = suppressTreeOnOpen = timeOut = currentRequest = classes = autoUpdatedSelections = useActionMenu = useActionMenuForced = translations = onRequestHandlers = onResponseHandlers = null;
 
 		base();
 	});
@@ -19623,6 +19925,48 @@ Fit.Controls.WSDropDown = function(ctlId)
 		}
 	}
 
+	function updateActionMenu()
+	{
+		if (useActionMenu === false)
+		{
+			return;
+		}
+
+		var searchIcon = "<span class='FitUiControlDropDownActionMenuItemIcon FitUiControlDropDownActionMenuItemIconSearch fa fa-search'></span> ";
+		var showAllIcon = "<span class='FitUiControlDropDownActionMenuItemIcon FitUiControlDropDownActionMenuItemIconShowAll fa fa-sitemap'></span> ";
+		var delIcon = "<span class='FitUiControlDropDownActionMenuItemIcon FitUiControlDropDownActionMenuItemIconDelete fa fa-times'></span> ";
+
+		var selectedItems = me.GetSelections();
+		var addRemoveAll = selectedItems.length > 1;
+
+		actionMenu.RemoveItems();
+
+		actionMenu.AddItem(searchIcon + translations.SearchMore, "SearchMore");
+
+		if (dataRequested === false || tree.GetChildren().length > 0)
+		{
+			actionMenu.AddItem(showAllIcon + translations.ShowAllOptions, "ShowAll");
+		}
+
+		if (addRemoveAll === true)
+		{
+			actionMenu.AddItem(delIcon + translations.RemoveAll, "RemoveAll");
+		}
+
+		Fit.Array.ForEach(selectedItems, function(item)
+		{
+			actionMenu.AddItem((addRemoveAll === true ? " &nbsp; &nbsp; &nbsp; " : "") + delIcon + translations.Remove + " " + item.Title, "Remove:" + item.Value);
+		});
+	}
+
+	function localize()
+	{
+		var locale = Fit.Internationalization.GetLocale(me);
+		translations = locale.Translations;
+
+		updateActionMenu();
+	}
+
 	function onDataLoaded(cb)
 	{
 		Fit.Validation.ExpectFunction(cb);
@@ -19700,31 +20044,46 @@ Fit.Controls.WSDropDown = function(ctlId)
 		// All locales inherit from en. All country specific overrides inherit
 		// from their primary locale (e.g. de_AT inherits from de).
 		// English (en) MUST be defined!
-		
+
 		"en": // US
 		{
 			Translations:
 			{
-				InvalidSelection		: "Invalid selection"
+				InvalidSelection		: "Invalid selection",
+
+				SearchMore				: "Search for more options",
+				ShowAllOptions			: "Show all available options",
+				RemoveAll				: "Remove all selected",
+				Remove					: "Remove"
 			}
 		},
 		"da":
 		{
 			Translations:
 			{
-				InvalidSelection		: "Ugyldigt valg"
+				InvalidSelection		: "Ugyldigt valg",
+
+				SearchMore				: "Søg efter flere valgmuligheder",
+				ShowAllOptions			: "Vis alle tilgængelige valgmuligheder",
+				RemoveAll				: "Fjern alle valgte",
+				Remove					: "Fjern"
 			}
 		},
 		"de":
 		{
 			Translations:
 			{
-				InvalidSelection		: "Ungültige Auswahl"
+				InvalidSelection		: "Ungültige Auswahl",
+
+				SearchMore				: "Nach weiteren Optionen suchen",
+				ShowAllOptions			: "Alle verfügbaren Optionen anzeigen",
+				RemoveAll				: "Alle ausgewählten entfernen",
+				Remove					: "Entfernen"
 			}
 		}
 	}
 	Fit.Internationalization.AddLocalization(Fit.Controls.DropDown, locale);
-	Fit.Internationalization.AddLocalization(Fit.Controls.WSDropDown, locale);	
+	Fit.Internationalization.AddLocalization(Fit.Controls.WSDropDown, locale);
 })();
 /// <container name="Fit.Controls.FilePicker" extends="Fit.Controls.ControlBase">
 /// 	Control allowing for files to be selected locally and uploaded asynchronously.
@@ -22629,8 +22988,15 @@ Fit.Controls.ListView = function(controlId)
 	var me = this;
 	var list = me.GetDomElement();
 	var active = null;
+	var persistView = false;
+	var scrollPositionTop = 0;
+	var highlightFirst = false;
+	var firstWasHighlighted = false;
 	var isIe8 = (Fit.Browser.GetInfo().Name === "MSIE" && Fit.Browser.GetInfo().Version === 8);
 
+	var onSelectHandlers = [];
+	var onSelectedHandlers = [];
+
 	function init()
 	{
 		list.tabIndex = "0";
@@ -22638,10 +23004,37 @@ Fit.Controls.ListView = function(controlId)
 
 		me.OnShow(function()
 		{
-			list.scrollTop = 0;
-			setActive(null);
+			if (persistView === false) // Reset selection and scroll position
+			{
+				if (highlightFirst === true)
+				{
+					focusFirstItem();
+				}
+				else
+				{
+					setActive(null);
+				}
+
+				list.scrollTop = 0;
+			}
+			else // View persisted
+			{
+				if (highlightFirst === true && firstWasHighlighted === false)
+				{
+					focusFirstItem();
+					firstWasHighlighted = true;
+				}
+
+				list.scrollTop = scrollPositionTop;
+			}
 		});
 
+		list.onscroll = function(e)
+		{
+			// Preserve scroll position which is lost if picker control is removed from DOM
+			scrollPositionTop = list.scrollTop;
+		};
+
 		list.onclick = function(e)
 		{
 			var ev = Fit.Events.GetEvent(e);
@@ -22657,12 +23050,17 @@ Fit.Controls.ListView = function(controlId)
 
 			// Fire OnChanging and OnChange events
 
+			var item = convertItemElementToObject(elm);
+			var selectionCanceled = fireOnSelectHandlers(item) === false;
+
 			// Notice: We always pass False as current selection state to OnItemSelectionChanging since ListView does
 			// not keep track of selection state. In theory item could very well already be selected in host control.
 			// Event handlers should not trust boolean to reveal selection in host control, only in picker.
-			if (me._internal.FireOnItemSelectionChanging(Fit.Dom.Text(elm), decode(Fit.Dom.Data(elm, "value")), false, false) === true)
+			if (selectionCanceled === false && me._internal.FireOnItemSelectionChanging(item.Title, item.Value, false, false) === true)
 			{
-				me._internal.FireOnItemSelectionChanged(Fit.Dom.Text(elm), decode(Fit.Dom.Data(elm, "value")), true, false);
+				fireOnSelectedHandlers(item);
+
+				me._internal.FireOnItemSelectionChanged(item.Title, item.Value, true, false);
 				me._internal.FireOnItemSelectionComplete();
 			}
 		}
@@ -22782,6 +23180,21 @@ Fit.Controls.ListView = function(controlId)
 		return null;
 	}
 
+	/// <function container="Fit.Controls.ListView" name="GetItems" access="public" returns="Fit.Controls.ListViewTypeDefs.ListViewItem[]">
+	/// 	<description> Get all items - returns array containing objects with Title (string) and Value (string) properties </description>
+	/// </function>
+	this.GetItems = function()
+	{
+		var items = [];
+
+		Fit.Array.ForEach(list.children, function(child)
+		{
+			Fit.Array.Add(items, convertItemElementToObject(child));
+		});
+
+		return items;
+	}
+
 	/// <function container="Fit.Controls.ListView" name="HasItem" access="public" returns="boolean">
 	/// 	<description> Returns value indicating whether control contains item with specified value </description>
 	/// 	<param name="value" type="string"> Value of item to check for </param>
@@ -22805,6 +23218,11 @@ Fit.Controls.ListView = function(controlId)
 		if (item !== null)
 		{
 			Fit.Dom.Remove(item);
+
+			if (item === active)
+			{
+				active = null;
+			}
 		}
 	}
 
@@ -22868,12 +23286,17 @@ Fit.Controls.ListView = function(controlId)
 
 				if (active !== null)
 				{
+					var item = convertItemElementToObject(active);
+					var selectionCanceled = fireOnSelectHandlers(item) === false;
+
 					// Notice: We always pass False as current selection state to OnItemSelectionChanging since ListView does
 					// not keep track of selection state. In theory item could very well already be selected in host control.
 					// Event handlers should not trust boolean to reveal selection in host control, only in picker.
-					if (me._internal.FireOnItemSelectionChanging(Fit.Dom.Text(active), decode(Fit.Dom.Data(active, "value")), false, false) === true)
+					if (selectionCanceled === false && me._internal.FireOnItemSelectionChanging(item.Title, item.Value, false, false) === true)
 					{
-						me._internal.FireOnItemSelectionChanged(Fit.Dom.Text(active), decode(Fit.Dom.Data(active, "value")), true, false);
+						fireOnSelectedHandlers(item);
+
+						me._internal.FireOnItemSelectionChanged(item.Title, item.Value, true, false);
 						me._internal.FireOnItemSelectionComplete();
 					}
 				}
@@ -22894,6 +23317,85 @@ Fit.Controls.ListView = function(controlId)
 		return null;
 	}
 
+	this.PersistView = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true && val !== persistView)
+		{
+			persistView = val;
+			scrollPositionTop = 0;
+		}
+
+		return persistView;
+	}
+
+	this.HighlightFirst = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			if (val !== highlightFirst)
+			{
+				highlightFirst = val;
+				firstWasHighlighted = false;
+			}
+
+			// Allow external code to force focus first item if picker is visible.
+			// Usually first item is automatically highlighted when the host control
+			// is opened (see OnShow handler in init()).
+			if (val === true && Fit.Dom.IsVisible(me.GetDomElement()) === true)
+			{
+				focusFirstItem();
+				firstWasHighlighted = true;
+			}
+		}
+
+		return highlightFirst;
+	}
+
+	/// <function container="Fit.Controls.ListViewTypeDefs" name="OnSelectEventHandler" returns="boolean | void">
+	/// 	<description> OnSelect event handler </description>
+	/// 	<param name="sender" type="$TypeOfThis"> Instance of control </param>
+	/// 	<param name="item" type="{ Title: string, Value: string }"> Selected item </param>
+	/// </function>
+
+	/// <function container="Fit.Controls.ListView" name="OnSelect" access="public">
+	/// 	<description>
+	/// 		Register event handler fired when item is being selected.
+	/// 		Selection can be canceled by returning False.
+	/// 		The following arguments are passed to event handler function:
+	/// 		Sender (ListView) and Item (with Title (string) and Value (string) properties).
+	/// 	</description>
+	/// 	<param name="cb" type="Fit.Controls.ListViewTypeDefs.OnSelectEventHandler"> Event handler function </param>
+	/// </function>
+	this.OnSelect = function(cb)
+	{
+		Fit.Validation.ExpectFunction(cb);
+		Fit.Array.Add(onSelectHandlers, cb);
+	}
+
+	/// <function container="Fit.Controls.ListViewTypeDefs" name="OnSelectedEventHandler">
+	/// 	<description> OnSelected event handler </description>
+	/// 	<param name="sender" type="$TypeOfThis"> Instance of control </param>
+	/// 	<param name="item" type="{ Title: string, Value: string }"> Selected item </param>
+	/// </function>
+
+	/// <function container="Fit.Controls.ListView" name="OnSelected" access="public">
+	/// 	<description>
+	/// 		Register event handler fired when item is selected.
+	/// 		The following arguments are passed to event handler function:
+	/// 		Sender (ListView) and Item (with Title (string) and Value (string) properties).
+	/// 	</description>
+	/// 	<param name="cb" type="Fit.Controls.ListViewTypeDefs.OnSelectedEventHandler"> Event handler function </param>
+	/// </function>
+	this.OnSelected = function(cb)
+	{
+		Fit.Validation.ExpectFunction(cb);
+		Fit.Array.Add(onSelectedHandlers, cb);
+	}
+
 	this.Destroy = Fit.Core.CreateOverride(this.Destroy, function(calledInternally)
 	{
 		Fit.Validation.ExpectBoolean(calledInternally, true);
@@ -22919,9 +23421,26 @@ Fit.Controls.ListView = function(controlId)
 			me.Destroy(true); // PickerBase.Destroy()
 		}
 
-		me = list = active = isIe8 = null;
+		me = list = active = persistView = scrollPositionTop = highlightFirst = firstWasHighlighted = isIe8 = onSelectHandlers = onSelectedHandlers = null;
 	});
 
+	// ============================================
+	// Protected
+	// ============================================
+
+	this._internal = (this._internal ? this._internal : {});
+
+	this._internal.FocusFirstItem = function() // Similar implementation in Fit.Controls.TreeView._internal.FocusFirstNode()
+	{
+		// If picker is still visible (it might have been hidden if user closed
+		// host control while data was being loaded/populated async.) then focus first item.
+		if (Fit.Dom.IsVisible(me.GetDomElement()) === true)
+		{
+			focusFirstItem();
+			firstWasHighlighted = true;
+		}
+	}
+
 	// ============================================
 	// Private
 	// ============================================
@@ -22972,6 +23491,14 @@ Fit.Controls.ListView = function(controlId)
 		}
 	}
 
+	function focusFirstItem()
+	{
+		if (list.children.length > 0)
+		{
+			setActive(list.children[0]);
+		}
+	}
+
 	function moveUp()
 	{
 		if (list.children.length === 0)
@@ -23006,6 +23533,37 @@ Fit.Controls.ListView = function(controlId)
 		}
 	}
 
+	function fireOnSelectHandlers(item)
+	{
+		Fit.Validation.ExpectObject(item);
+		Fit.Validation.ExpectString(item.Title);
+		Fit.Validation.ExpectString(item.Value);
+
+		var selectionCanceled = false;
+
+		Fit.Array.ForEach(onSelectHandlers, function(handler)
+		{
+			if (handler(me, item) === false)
+			{
+				selectionCanceled = true;
+			}
+		});
+
+		return selectionCanceled === true ? false : true; // Return False if canceled
+	}
+
+	function fireOnSelectedHandlers(item)
+	{
+		Fit.Validation.ExpectObject(item);
+		Fit.Validation.ExpectString(item.Title);
+		Fit.Validation.ExpectString(item.Value);
+
+		Fit.Array.ForEach(onSelectedHandlers, function(handler)
+		{
+			handler(me, item);
+		});
+	}
+
 	function repaint()
 	{
 		if (isIe8 === true)
@@ -23343,6 +23901,26 @@ Fit.Controls.WSListView = function(ctlId)
 				populate(item);
 			});
 
+			// Highlight first item
+
+			if (me.PersistView() === true)
+			{
+				// Reset PersistView to make sure it does not reuse state
+				// for newly loaded items, in case item list is changed.
+				me.PersistView(false);
+				me.PersistView(true);
+			}
+
+			if (me.HighlightFirst() === true)
+			{
+				// Reset HighlightFirst to make sure it takes effect again
+				// for newly loaded items, in case item list is changed.
+				me.HighlightFirst(false);
+				me.HighlightFirst(true);
+
+				me._internal.FocusFirstItem();
+			}
+
 			// Invoke callback
 
 			if (Fit.Validation.IsSet(cb) === true)
@@ -23867,6 +24445,10 @@ Fit.Controls.TreeView = function(ctlId)
 	var showSelectAll = false; // TBD: Never implemented - can be achieved using ContextMenu. Remove or implement?
 	var allowDeselect = true;
 	var revealExpandedNodes = false;
+	var persistView = false;
+	var scrollPosition = { X: 0, Y: 0 };
+	var highlightFirst = false;
+	var firstWasHighlighted = false;
 
 	var selected = createInternalCollection();
 	var selectedOrg = [];
@@ -24267,6 +24849,13 @@ Fit.Controls.TreeView = function(ctlId)
 				touchTimeout = -1;
 			}
 		});
+
+		Fit.Events.AddHandler(me.GetDomElement(), "scroll", function(e)
+		{
+			// Preserve scroll position which is lost if picker control is removed from DOM
+			scrollPosition.X = me.GetDomElement().scrollLeft;
+			scrollPosition.Y = me.GetDomElement().scrollTop;
+		});
 	}
 
 	// ============================================
@@ -24865,7 +25454,7 @@ Fit.Controls.TreeView = function(ctlId)
 			me.Destroy(true); // PickerBase.Destroy()
 		}
 
-		me = rootContainer = rootNode = focusInEventId = keyNavigationEnabled = selectable = multiSelect = showSelectAll = allowDeselect = revealExpandedNodes = selected = selectedOrg = ctx = onSelectHandlers = onSelectedHandlers = onToggleHandlers = onToggledHandlers = onSelectAllHandlers = onSelectAllCompleteHandlers = onContextMenuHandlers = forceClear = isIe8 = isPicker = activeNode = hostFocused = null;
+		me = rootContainer = rootNode = focusInEventId = keyNavigationEnabled = selectable = multiSelect = showSelectAll = allowDeselect = revealExpandedNodes = persistView = scrollPosition = highlightFirst = firstWasHighlighted = selected = selectedOrg = ctx = onSelectHandlers = onSelectedHandlers = onToggleHandlers = onToggledHandlers = onSelectAllHandlers = onSelectAllCompleteHandlers = onContextMenuHandlers = forceClear = isIe8 = isPicker = activeNode = hostFocused = null;
 	});
 
 	// ============================================
@@ -25041,10 +25630,31 @@ Fit.Controls.TreeView = function(ctlId)
 
 	this.OnShow(function(sender)
 	{
-		// Reset selection and scroll
-		unsetActiveNode();
-		me.GetDomElement().scrollTop = 0;
-		me.GetDomElement().scrollLeft = 0;
+		if (persistView === false) // Reset selection and scroll position
+		{
+			if (highlightFirst === true)
+			{
+				focusFirstNode();
+			}
+			else
+			{
+				unsetActiveNode();
+			}
+
+			me.GetDomElement().scrollTop = 0;
+			me.GetDomElement().scrollLeft = 0;
+		}
+		else // View persisted
+		{
+			if (highlightFirst === true && firstWasHighlighted === false)
+			{
+				focusFirstNode();
+				firstWasHighlighted = true;
+			}
+
+			me.GetDomElement().scrollTop = scrollPosition.Y;
+			me.GetDomElement().scrollLeft = scrollPosition.X;
+		}
 	});
 
 	this.OnSelect(function(sender, node)
@@ -25173,6 +25783,45 @@ Fit.Controls.TreeView = function(ctlId)
 		return null;
 	}
 
+	this.PersistView = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true && val !== persistView)
+		{
+			persistView = val;
+			scrollPosition.X = 0;
+			scrollPosition.Y = 0;
+		}
+
+		return persistView;
+	}
+
+	this.HighlightFirst = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			if (val !== highlightFirst)
+			{
+				highlightFirst = val;
+				firstWasHighlighted = false;
+			}
+
+			// Allow external code to force focus first item if picker is visible.
+			// Usually first item is automatically highlighted when the host control
+			// is opened (see OnShow handler in init()).
+			if (val === true && Fit.Dom.IsVisible(me.GetDomElement()) === true)
+			{
+				focusFirstNode();
+				firstWasHighlighted = true;
+			}
+		}
+
+		return highlightFirst;
+	}
+
 	this.UpdateItemSelection = function(itemValue, selected, programmaticallyChanged)
 	{
 		Fit.Validation.ExpectString(itemValue);
@@ -25223,6 +25872,17 @@ Fit.Controls.TreeView = function(ctlId)
 		fireEventHandlers(onSelectAllCompleteHandlers, { Selected: selected, Node: node || null });
 	}
 
+	this._internal.FocusFirstNode = function() // Similar implementation in Fit.Controls.ListView._internal.FocusFirstItem()
+	{
+		// If picker is still visible (it might have been hidden if user closed
+		// host control while data was being loaded/populated async.) then focus first node.
+		if (Fit.Dom.IsVisible(me.GetDomElement()) === true)
+		{
+			focusFirstNode();
+			firstWasHighlighted = true;
+		}
+	}
+
     this.HandleEvent = function(e)
     {
 		Fit.Validation.ExpectEvent(e, true);
@@ -27450,6 +28110,29 @@ Fit.Controls.WSTreeView = function(ctlId)
 				delete request._loadingIndicator;
 			}
 
+			// Highlight first node
+
+			if (node === null) // Only do this for root nodes
+			{
+				if (me.PersistView() === true)
+				{
+					// Reset PersistView to make sure it does not reuse state
+					// for newly loaded nodes, in case node list is changed.
+					me.PersistView(false);
+					me.PersistView(true);
+				}
+
+				if (me.HighlightFirst() === true)
+				{
+					// Reset HighlightFirst to make sure it takes effect again
+					// for newly loaded nodes, in case node list is changed.
+					me.HighlightFirst(false);
+					me.HighlightFirst(true);
+
+					me._internal.FocusFirstNode();
+				}
+			}
+
 			// Select nodes found in preselections
 
 			var hasBeenDisposedOrDetached = node !== null && nodeDisposedOrDetached(node);