scripting:dialogs:multi_listbox

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
scripting:dialogs:multi_listbox [2015/01/20 00:02] – [Example] adminscripting: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. List box control with ability to select several items.
 +{{ :scripting:dialogs:multi-list-box.png?150|Multi-ListBox example}}
 +
  
 ===== Properties ===== ===== Properties =====
Line 7: Line 9:
 ^ Property     ^ Default Value   ^ Description    ^ ^ Property     ^ Default Value   ^ Description    ^
 | **id**    | empty | id (name) of the script data object associated with control |   | **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) |   | **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 |   | **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 ===== ===== 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 ==== ==== Item ====
Line 25: Line 27:
 <file javascript multi-list-box.hejs> <file javascript multi-list-box.hejs>
 #include "he_utils.js" // this is include file #include "he_utils.js" // this is include file
 + 
 +var varStorage = new Storage();
  
 // dynamically mark as selected first and third items  // dynamically mark as selected first and third items 
 // (function js2ax as ax2js defined in he_utils.js) // (function js2ax as ax2js defined in he_utils.js)
-var multi_listboxindex = js2ax(new Array(0,2));+// value passed as part of variable storage  
 +varStorage.dynamic_list = js2ax(new Array(0,2)); 
 + 
 +// 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));
  
 var dialog_template = var dialog_template =
 '@<dialog title="Test dialog" resizable="true" contexthelp="true" id="testdlg"> \ '@<dialog title="Test dialog" resizable="true" contexthelp="true" id="testdlg"> \
- <multi_listbox extended_sel="true" id="multi_listboxindex" required="true"> \ + <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" selected="true"/> \ + <item text="Item 4"/> \ 
-  <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"/> \ 
-  <item text="Item 8"/> \ + </multi_listbox> \ 
-  <item text="Item 9" selected="true"/> \ + <multi_listbox align="right" id="dynamic_list"> \ 
-  <item text="Item 10"/> \+ <item text="Item 1"/> \ 
 + <item text="Item 2"/> \ 
 + <item text="Item 3"/> \ 
 + <item text="Item 4"/> \ 
 + <item text="Item 5"/> \ 
 + <item text="Item 6"/> \ 
 + <item text="Item 7"/> \ 
 + </multi_listbox> \ 
 + <multi_listbox extended_sel="true" align="left" id="static_list" required="true"> \ 
 + <item text="Item 1" selected="true"/> \ 
 + <item text="Item 2"/> \ 
 + <item text="Item 3"/> \ 
 + <item text="Item 4" selected="true"/> \ 
 + <item text="Item 5"/> \ 
 + <item text="Item 6"/> \ 
 + <item text="Item 7" selected="true"/> \
  </multi_listbox> \  </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>@'; </dialog>@';
 + 
 // show dialog using dialog template and variables storage for passing initial data // show dialog using dialog template and variables storage for passing initial data
 var returnCode = dialog(dialog_template, varStorage); var returnCode = dialog(dialog_template, varStorage);
  
-// evaluate here returnCode (returnval of selected button) and decide if varStorage shall be evaluated+Output().Clear();
  
 // after closing of the dialog variable storage (varStorage) contains all states  // after closing of the dialog variable storage (varStorage) contains all states 
-// of the controls (which has variable id connected) +// of the controls (which has variable id connected) 
- +
-Output().clear();+
 Output().writeln("Dialog returns: " + returnCode); Output().writeln("Dialog returns: " + returnCode);
 + 
 +// evaluate here returnCode (returnval of selected button) and decide if varStorage shall be evaluated
 +if ( returnCode == "ok" ) { 
 + // convert VB array to JS array and output it
 + Output().writeln("Global dynamic list selection: " + ax2js(global_dynamic_list));
 + Output().writeln("Dynamic list selection: " + ax2js(varStorage.dynamic_list));
 + Output().writeln("Static list selection: " + ax2js(varStorage.static_list));
 +}
 +</file>
  
-// convert VB array to JS array and output it +===== Dynamic content ===== 
-Output().writeln("Variable multi_listboxindex: " + ax2js(multi_listboxindex));+Creating content dynamically is not straightforward, but possible by generating of the static template in script.
  
-</file>+<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>