Differences

This shows you the differences between two versions of the page.

--- scripting:dialogs:multi_listbox [2015/01/20 00:08] – [Example] admin
+++ scripting:dialogs:multi_listbox [2018/01/10 20:41] (current) – external edit 127.0.0.1
@@ Line 2: / Line 2: @@
 List box control with ability to select several items.
+{{ :scripting:dialogs:multi-list-box.png?150|Multi-ListBox example}}
 ===== Properties =====
@@ Line 7: / Line 9: @@
 ^ Property     ^ Default Value   ^ Description    ^
 | **id**    | empty | id (name) of the script data object associated with control |
-| **align**    | empty | [[scripting:dialogs:align|Alignment]] of the control |
+| **align**    | stretched | [[scripting:dialogs:align|Alignment]] of the control |
 | **required**    | false | required property of the control (if control is initial, "positive" buttons will be disabled) |
 | **minwidth**    | 12 | Minimum width, in characters of the list box control |
-| **extended_sel**  | false          | Extended Selection mode        |
+| **extended_sel**  | false          | Extended Selection mode (previous selection is reset, if Ctrl is not pressed)       |
 ===== Items =====
-List Box is filled by //Items//. You can fill it as statically in-line, as dynamically using associated by //id// script variable (VB Array of integers, use ax2js function to convert from JS array).
+List Box is filled by //Items//. Initial selection state for items can be set statically in-line or dynamically using associated by //id// script variable (VB Array of integers, use [[scripting:dialogs:ax2js|ax2js]] function to convert from JS array). If you pass dynamic content and define static selection, static one is ignored.
 ==== Item ====
@@ Line 33: / Line 35: @@
 varStorage.dynamic_list = js2ax(new Array(0,2));
-// passing values using global script variable
+// passing selection state using global script variable
 // in this case using of Storage object is not needed
 var global_dynamic_list = js2ax(new Array(1,3));
@@ Line 39: / Line 41: @@
 var dialog_template =
 '@<dialog title="Test dialog" resizable="true" contexthelp="true" id="testdlg"> \
-	<multi_listbox extended_sel="true" id="global_dynamic_list"> \
+	<multi_listbox extended_sel="true" minwidth="24" id="global_dynamic_list"> \
-		 <item text="Item 1"/> \
+		<item text="Item 1"/> \
-		 <item text="Item 2"/> \
+		<item text="Item 2"/> \
-		 <item text="Item 3"/> \
+		<item text="Item 3"/> \
-		 <item text="Item 4"/> \
+		<item text="Item 4"/> \
-		 <item text="Item 5"/> \
+		<item text="Item 5"/> \
-		 <item text="Item 6"/> \
+		<item text="Item 6"/> \
-		 <item text="Item 7"/> \
+		<item text="Item 7"/> \
 	</multi_listbox> \
-	<multi_listbox id="dynamic_list"> \
+	<multi_listbox align="right" id="dynamic_list"> \
-		 <item text="Item 1"/> \
+		<item text="Item 1"/> \
-		 <item text="Item 2"/> \
+		<item text="Item 2"/> \
-		 <item text="Item 3"/> \
+		<item text="Item 3"/> \
-		 <item text="Item 4"/> \
+		<item text="Item 4"/> \
-		 <item text="Item 5"/> \
+		<item text="Item 5"/> \
-		 <item text="Item 6"/> \
+		<item text="Item 6"/> \
-		 <item text="Item 7"/> \
+		<item text="Item 7"/> \
 	</multi_listbox> \
-	<multi_listbox extended_sel="true" id="static_list" required="true"> \
+	<multi_listbox extended_sel="true" align="left" id="static_list" required="true"> \
-		 <item text="Item 1" selected="true"/> \
+		<item text="Item 1" selected="true"/> \
-		 <item text="Item 2"/> \
+		<item text="Item 2"/> \
-		 <item text="Item 3"/> \
+		<item text="Item 3"/> \
-		 <item text="Item 4" selected="true"/> \
+		<item text="Item 4" selected="true"/> \
-		 <item text="Item 5"/> \
+		<item text="Item 5"/> \
-		 <item text="Item 6"/> \
+		<item text="Item 6"/> \
-		 <item text="Item 7" selected="true"/> \
+		<item text="Item 7" selected="true"/> \
 	</multi_listbox> \
-   <group uniform="true" align="right"> \
+	<group uniform="true" align="right"> \
-	   <button title="&amp;OK" returnval="ok" default="true"/> \
+		<button title="&amp;OK" returnval="ok" default="true"/> \
-	   <button title="&amp;Cancel" returnval="cancel"/> \
+		<button title="&amp;Cancel" returnval="cancel"/> \
-   </group> \
+	</group> \
 </dialog>@';
@@ Line 88: / Line 90: @@
 	Output().writeln("Static list selection: " + ax2js(varStorage.static_list));
 }
 </file>
+===== Dynamic content =====
+Creating content dynamically is not straightforward, but possible by generating of the static template in script.
+<file javascript multi-list-box-dynamic-content.hejs>
+#include "he_utils.js"	// this is include file
+var varStorage = new Storage();
+var dialog_template =
+'<dialog title="Test dialog" resizable="true" id="testdlg">\r\n \
+ <multi_listbox extended_sel="true" minwidth="24" maxheight=8 id="dynamic_content_list">';
+for(var nItem = 0; nItem < 100; ++nItem)
+  dialog_template += '\r\n' + '    <item text="Item ' + nItem + '"/>';
+dialog_template += '\r\n' + '  </multi_listbox> \
+\r\n  <group uniform="true" align="right"> \
+\r\n    <button title="&amp;OK" returnval="ok" default="true"/> \
+\r\n   <button title="&amp;Cancel" returnval="cancel"/> \
+\r\n  </group> \
+\r\n</dialog>';
+Output().Clear();
+// show dialog using dialog template and variables storage for passing initial data
+Output().writeln("Dialog returns: " + dialog(dialog_template, varStorage));
+// evaluate here returnCode (returnval of selected button) and decide if varStorage shall be evaluated
+Output().writeln("Dialog template:");
+Output().writeln(dialog_template);
+// convert VB array to JS array and output it
+Output().writeln("List selection: " + ax2js(varStorage.dynamic_content_list));
+</file>