Difference between revisions of "HTML Presentation Object: Multiselect dropdown list"
Jump to navigation
Jump to search
(Created page with " # Create a dataset with name '''listOptions'''. # Selected values are updated to context variable '''listValue'''. # Visible name in the dropdown list is from column '''labe...") |
|||
(9 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | This is an example of a multiselect dropdown list implemented using the HTML Presentation Object. The list gets its options from a [[Datasets_in_QPR_UI|dataset]], and the selected values are stored to a context variable as a JSON string array, e.g. '''["value1", "value2", "value3"]'''. | ||
− | + | To use the dropdown list, create a dataset with name '''options'''. The dataset must contain at least two columns: '''label''' and '''value'''. By default, the dropdown list sets the selections to context variable '''dropdownListSelections'''. | |
− | + | ||
− | + | Following settings can be changed: | |
+ | * Used dataset identifier can be changed using '''datasetIndentifier''' javascript variable. | ||
+ | * The context variable to store selections, can be changed using '''valueContextVariable''' javascript variable. | ||
+ | * Dataset column name which is used as the visible labels in the dropdown list, can be changed using '''labelColumnName''' javascript variable. | ||
+ | * Dataset column name which is used as the value (that is stored to the context variable) in the dropdown list, can be changed using '''valueColumnName''' javascript variable. | ||
+ | * '''updateVariableOnlyWhenClosing''' determines whether the context variable is updated in every item change or only when the dropdown list is closed. | ||
+ | * Dropdown list height can be changed using '''popupHeight''' option. | ||
+ | * Watermark text can be change using '''watermarkText''' option. | ||
+ | * Filter can be shown/hidden using '''enableFilterSearch''' option. | ||
+ | |||
+ | Following is the HTML code for the dropdown list: | ||
<pre> | <pre> | ||
+ | <div class="label<#uniqueId>"><#label>:</div> | ||
<input type="text" id="container<#uniqueId>" /> | <input type="text" id="container<#uniqueId>" /> | ||
<style> | <style> | ||
− | . | + | .label<#uniqueId> { |
− | + | margin: 5px 0px 0px 11px; | |
+ | font-size: 15px; | ||
+ | } | ||
+ | .list<#uniqueId> { | ||
+ | margin: 0px 0px 0px 10px; | ||
} | } | ||
.e-input { | .e-input { | ||
cursor: pointer !important; | cursor: pointer !important; | ||
+ | } | ||
+ | .e-options { | ||
+ | padding-top: 4px !important; | ||
+ | padding-bottom: 5px !important; | ||
+ | margin-top: 3px !important; | ||
+ | margin-bottom: 3px !important; | ||
} | } | ||
</style> | </style> | ||
<script> | <script> | ||
− | var valueContextVariable = " | + | (function() { |
+ | var datasetIndentifier = "options"; | ||
+ | var valueContextVariable = "dropdownListSelections"; | ||
var labelColumnName = "label"; | var labelColumnName = "label"; | ||
var valueColumnName = "value"; | var valueColumnName = "value"; | ||
− | var poData | + | var updateVariableOnlyWhenClosing = false; |
− | var width | + | var poData; |
− | var | + | var width = 0; |
+ | var selectedValues; | ||
+ | var listOpen = false; | ||
− | + | window["<#datasetChangeFunction>"] = function(datasetIdentifier, datasetChangeCallbackFunction) { | |
− | if (datasetIdentifier == | + | if (datasetIdentifier == datasetIndentifier) datasetChangeCallbackFunction(myDatasetAvailable); |
} | } | ||
− | function myDatasetAvailable | + | function myDatasetAvailable(datasetData) { |
if (datasetData == null || datasetData.sheets == null || datasetData.sheets.length == 0 || datasetData.sheets[0] == null || datasetData.sheets[0].values == null || datasetData.sheets[0].values.length == 0) return; | if (datasetData == null || datasetData.sheets == null || datasetData.sheets.length == 0 || datasetData.sheets[0] == null || datasetData.sheets[0].values == null || datasetData.sheets[0].values.length == 0) return; | ||
− | poData | + | poData = []; |
for (var row = 1; row < datasetData.sheets[0].values[0].length; row++) { | for (var row = 1; row < datasetData.sheets[0].values[0].length; row++) { | ||
var rowObject = {}; | var rowObject = {}; | ||
Line 36: | Line 62: | ||
rowObject[datasetData.sheets[0].values[column][0].attribute] = datasetData.sheets[0].values[column][row].value; | rowObject[datasetData.sheets[0].values[column][0].attribute] = datasetData.sheets[0].values[column][row].value; | ||
} | } | ||
− | poData | + | poData.push(rowObject); |
} | } | ||
− | + | initializePO(); | |
} | } | ||
− | + | window["<#contextChangeFunction>"] = function(changedContextVariables) { | |
− | if ( | + | if (changedContextVariables[valueContextVariable] != null) { |
− | + | try { | |
− | + | selectedValues = JSON.parse(changedContextVariables[valueContextVariable]); | |
− | + | } catch (exception) { | |
− | + | return; | |
− | + | } | |
− | + | var dropdownList = $("#container<#uniqueId>").data("ejDropDownList"); | |
+ | if (dropdownList != null) { | ||
+ | var selectedItemIndeces = dropdownList.model.selectedItems; | ||
+ | var previouslySelectedValues = []; | ||
+ | for (var i = 0; i < selectedItemIndeces.length; i++) { | ||
+ | previouslySelectedValues.push(dropdownList.model.dataSource[selectedItemIndeces[i]][valueColumnName]); | ||
+ | } | ||
+ | selectedValues.sort(); | ||
+ | previouslySelectedValues.sort(); | ||
+ | if (previouslySelectedValues.length != selectedValues.length || !previouslySelectedValues.every(function(v,i) { return v === selectedValues[i]})) { | ||
+ | initializePO(); | ||
+ | } | ||
+ | } | ||
+ | } | ||
} | } | ||
− | + | window["<#resizeFunction>"] = function(newWidth, newHeight) { | |
− | if ( | + | width = newWidth; |
− | $("#container<#uniqueId>").ejDropDownList({ | + | initializePO(); |
− | dataSource: poData | + | } |
− | fields: { text: | + | |
+ | function initializePO() { | ||
+ | if (width == 0) return; | ||
+ | if ($("#container<#uniqueId>").data("ejDropDownList") != null) $("#container<#uniqueId>").data("ejDropDownList").destroy(); | ||
+ | var dropdownList = $("#container<#uniqueId>").ejDropDownList({ | ||
+ | dataSource: poData, | ||
+ | fields: { text: labelColumnName, value: valueColumnName }, | ||
showCheckbox: true, | showCheckbox: true, | ||
− | watermarkText: " | + | watermarkText: "<#watermark>", |
multiSelectMode: "visualmode", | multiSelectMode: "visualmode", | ||
enableFilterSearch: true, | enableFilterSearch: true, | ||
popupHeight: "400px", | popupHeight: "400px", | ||
− | + | cssClass: "list<#uniqueId>", | |
− | }); | + | }).data("ejDropDownList"); |
+ | dropdownList.unCheckAll(); | ||
+ | dropdownList.selectItemByValue(selectedValues); | ||
+ | dropdownList.option("change", valueChanged); | ||
+ | dropdownList.option("checkChange", valueChanged); | ||
+ | dropdownList.option("popupShown", valueChanged); | ||
+ | dropdownList.option("popupHide", valueChanged); | ||
+ | var dropdownListWidth = width - 18; | ||
+ | dropdownList.option("width", (dropdownListWidth < 10 ? 10 : dropdownListWidth)); | ||
} | } | ||
− | function valueChanged | + | function valueChanged(action) { |
+ | if (action != null && action.type == "popupShown") { | ||
+ | listOpen = true; | ||
+ | return; | ||
+ | } else if (action != null && action.type == "popupHide") { | ||
+ | listOpen = false; | ||
+ | } | ||
+ | |||
+ | if (!updateVariableOnlyWhenClosing || ((action != null && action.type == "change" && !listOpen) || (action != null && action.type == "popupHide"))) { | ||
var dropdownList = $("#container<#uniqueId>").data("ejDropDownList"); | var dropdownList = $("#container<#uniqueId>").data("ejDropDownList"); | ||
+ | if (dropdownList == null) return; | ||
var selectedItemIndeces = dropdownList.model.selectedItems; | var selectedItemIndeces = dropdownList.model.selectedItems; | ||
var selectedItems = []; | var selectedItems = []; | ||
Line 72: | Line 134: | ||
selectedItems.push(dropdownList.model.dataSource[selectedItemIndeces[i]][valueColumnName]); | selectedItems.push(dropdownList.model.dataSource[selectedItemIndeces[i]][valueColumnName]); | ||
} | } | ||
− | window.parent.setSessionVariable(valueContextVariable, JSON.stringify(selectedItems)); | + | selectedItems.sort(); |
+ | if (valueContextVariable != null && valueContextVariable != "") window.parent.setSessionVariable(valueContextVariable, JSON.stringify(selectedItems)); | ||
} | } | ||
+ | } | ||
+ | }()) | ||
</script> | </script> | ||
</pre> | </pre> | ||
+ | |||
+ | [[Category: QPR UI]] |
Latest revision as of 21:29, 20 March 2018
This is an example of a multiselect dropdown list implemented using the HTML Presentation Object. The list gets its options from a dataset, and the selected values are stored to a context variable as a JSON string array, e.g. ["value1", "value2", "value3"].
To use the dropdown list, create a dataset with name options. The dataset must contain at least two columns: label and value. By default, the dropdown list sets the selections to context variable dropdownListSelections.
Following settings can be changed:
- Used dataset identifier can be changed using datasetIndentifier javascript variable.
- The context variable to store selections, can be changed using valueContextVariable javascript variable.
- Dataset column name which is used as the visible labels in the dropdown list, can be changed using labelColumnName javascript variable.
- Dataset column name which is used as the value (that is stored to the context variable) in the dropdown list, can be changed using valueColumnName javascript variable.
- updateVariableOnlyWhenClosing determines whether the context variable is updated in every item change or only when the dropdown list is closed.
- Dropdown list height can be changed using popupHeight option.
- Watermark text can be change using watermarkText option.
- Filter can be shown/hidden using enableFilterSearch option.
Following is the HTML code for the dropdown list:
<div class="label<#uniqueId>"><#label>:</div> <input type="text" id="container<#uniqueId>" /> <style> .label<#uniqueId> { margin: 5px 0px 0px 11px; font-size: 15px; } .list<#uniqueId> { margin: 0px 0px 0px 10px; } .e-input { cursor: pointer !important; } .e-options { padding-top: 4px !important; padding-bottom: 5px !important; margin-top: 3px !important; margin-bottom: 3px !important; } </style> <script> (function() { var datasetIndentifier = "options"; var valueContextVariable = "dropdownListSelections"; var labelColumnName = "label"; var valueColumnName = "value"; var updateVariableOnlyWhenClosing = false; var poData; var width = 0; var selectedValues; var listOpen = false; window["<#datasetChangeFunction>"] = function(datasetIdentifier, datasetChangeCallbackFunction) { if (datasetIdentifier == datasetIndentifier) datasetChangeCallbackFunction(myDatasetAvailable); } function myDatasetAvailable(datasetData) { if (datasetData == null || datasetData.sheets == null || datasetData.sheets.length == 0 || datasetData.sheets[0] == null || datasetData.sheets[0].values == null || datasetData.sheets[0].values.length == 0) return; poData = []; for (var row = 1; row < datasetData.sheets[0].values[0].length; row++) { var rowObject = {}; for (var column = 0; column < datasetData.sheets[0].values.length; column++) { rowObject[datasetData.sheets[0].values[column][0].attribute] = datasetData.sheets[0].values[column][row].value; } poData.push(rowObject); } initializePO(); } window["<#contextChangeFunction>"] = function(changedContextVariables) { if (changedContextVariables[valueContextVariable] != null) { try { selectedValues = JSON.parse(changedContextVariables[valueContextVariable]); } catch (exception) { return; } var dropdownList = $("#container<#uniqueId>").data("ejDropDownList"); if (dropdownList != null) { var selectedItemIndeces = dropdownList.model.selectedItems; var previouslySelectedValues = []; for (var i = 0; i < selectedItemIndeces.length; i++) { previouslySelectedValues.push(dropdownList.model.dataSource[selectedItemIndeces[i]][valueColumnName]); } selectedValues.sort(); previouslySelectedValues.sort(); if (previouslySelectedValues.length != selectedValues.length || !previouslySelectedValues.every(function(v,i) { return v === selectedValues[i]})) { initializePO(); } } } } window["<#resizeFunction>"] = function(newWidth, newHeight) { width = newWidth; initializePO(); } function initializePO() { if (width == 0) return; if ($("#container<#uniqueId>").data("ejDropDownList") != null) $("#container<#uniqueId>").data("ejDropDownList").destroy(); var dropdownList = $("#container<#uniqueId>").ejDropDownList({ dataSource: poData, fields: { text: labelColumnName, value: valueColumnName }, showCheckbox: true, watermarkText: "<#watermark>", multiSelectMode: "visualmode", enableFilterSearch: true, popupHeight: "400px", cssClass: "list<#uniqueId>", }).data("ejDropDownList"); dropdownList.unCheckAll(); dropdownList.selectItemByValue(selectedValues); dropdownList.option("change", valueChanged); dropdownList.option("checkChange", valueChanged); dropdownList.option("popupShown", valueChanged); dropdownList.option("popupHide", valueChanged); var dropdownListWidth = width - 18; dropdownList.option("width", (dropdownListWidth < 10 ? 10 : dropdownListWidth)); } function valueChanged(action) { if (action != null && action.type == "popupShown") { listOpen = true; return; } else if (action != null && action.type == "popupHide") { listOpen = false; } if (!updateVariableOnlyWhenClosing || ((action != null && action.type == "change" && !listOpen) || (action != null && action.type == "popupHide"))) { var dropdownList = $("#container<#uniqueId>").data("ejDropDownList"); if (dropdownList == null) return; var selectedItemIndeces = dropdownList.model.selectedItems; var selectedItems = []; for (var i = 0; i < selectedItemIndeces.length; i++) { selectedItems.push(dropdownList.model.dataSource[selectedItemIndeces[i]][valueColumnName]); } selectedItems.sort(); if (valueContextVariable != null && valueContextVariable != "") window.parent.setSessionVariable(valueContextVariable, JSON.stringify(selectedItems)); } } }()) </script>