Difference between revisions of "HTML Presentation Object: Multiselect dropdown list"
Jump to navigation
Jump to search
Line 1: | Line 1: | ||
− | This | + | This page contains an example of a multiselect dropdown list implemented using HTML Presentation Object. It gets it's options from a dataset, and the selected values are stored to a global context variable as a JSON string array (e.g. '''["value1", "value2", "value3"]'''. |
− | + | To get the dropdown list working with the default settings, create a dataset with name '''listOptions'''. The dataset must contain at least two columns: '''label''' and '''value'''. By default, the dropdown list sets the selections to context variable '''listSelection'''. | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | Following is the HTML code for the dropdown list | + | 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 '''listSelection''' 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. | ||
+ | * Dropdown list height can be changed using '''popupHeight''' option. | ||
+ | * Watermark text can be change using '''watermarkText''' option. | ||
+ | |||
+ | Following is the HTML code for the dropdown list: | ||
<pre> | <pre> | ||
Line 19: | Line 22: | ||
.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 = " | + | var datasetIndentifier = "listOptions"; |
+ | var valueContextVariable = "listSelection"; | ||
var labelColumnName = "label"; | var labelColumnName = "label"; | ||
var valueColumnName = "value"; | var valueColumnName = "value"; | ||
var poData<#uniqueId>; | var poData<#uniqueId>; | ||
− | var width<#uniqueId>; | + | var width<#uniqueId> = 0; |
− | var | + | var selectedValues<#uniqueId>; |
function <#datasetChangeFunction>(datasetIdentifier, datasetChangeCallbackFunction) { | function <#datasetChangeFunction>(datasetIdentifier, datasetChangeCallbackFunction) { | ||
− | if (datasetIdentifier == | + | if (datasetIdentifier == datasetIndentifier) datasetChangeCallbackFunction(myDatasetAvailable<#uniqueId>); |
} | } | ||
Line 44: | Line 54: | ||
poData<#uniqueId>.push(rowObject); | poData<#uniqueId>.push(rowObject); | ||
} | } | ||
− | + | initializePO<#uniqueId>(); | |
+ | } | ||
+ | |||
+ | function <#contextChangeFunction>(changedContextVariables) { | ||
+ | if (changedContextVariables[valueContextVariable] != null) { | ||
+ | try { | ||
+ | selectedValues<#uniqueId> = 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<#uniqueId>.sort(); | ||
+ | previouslySelectedValues.sort(); | ||
+ | if (previouslySelectedValues.length != selectedValues<#uniqueId>.length || !previouslySelectedValues.every(function(v,i) { return v === selectedValues<#uniqueId>[i]})) { | ||
+ | initializePO<#uniqueId>(); | ||
+ | } | ||
+ | } | ||
+ | } | ||
} | } | ||
function <#resizeFunction>(newWidth, newHeight) { | function <#resizeFunction>(newWidth, newHeight) { | ||
− | |||
width<#uniqueId> = newWidth; | width<#uniqueId> = newWidth; | ||
− | + | initializePO<#uniqueId>(); | |
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | function | + | function initializePO<#uniqueId>() { |
− | if ( | + | if ($("#container<#uniqueId>").data("ejDropDownList") != null) $("#container<#uniqueId>").data("ejDropDownList").destroy(); |
− | $("#container<#uniqueId>").ejDropDownList({ | + | var dropdownList = $("#container<#uniqueId>").ejDropDownList({ |
dataSource: poData<#uniqueId>, | dataSource: poData<#uniqueId>, | ||
− | fields: { text: "label", value: " | + | fields: { text: "label", value: "value" }, |
showCheckbox: true, | showCheckbox: true, | ||
watermarkText: "Select item(s)", | watermarkText: "Select item(s)", | ||
Line 67: | Line 95: | ||
enableFilterSearch: true, | enableFilterSearch: true, | ||
popupHeight: "400px", | popupHeight: "400px", | ||
− | + | }).data("ejDropDownList"); | |
− | + | dropdownList.unCheckAll(); | |
+ | dropdownList.selectItemByValue(selectedValues<#uniqueId>); | ||
+ | dropdownList.option("change", "valueChanged<#uniqueId>"); | ||
+ | var dropdownListWidth = width<#uniqueId> - 18; | ||
+ | dropdownList.option("width", (dropdownListWidth < 10 ? 10 : dropdownListWidth)); | ||
} | } | ||
function valueChanged<#uniqueId>() { | function valueChanged<#uniqueId>() { | ||
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 78: | Line 111: | ||
selectedItems.push(dropdownList.model.dataSource[selectedItemIndeces[i]][valueColumnName]); | selectedItems.push(dropdownList.model.dataSource[selectedItemIndeces[i]][valueColumnName]); | ||
} | } | ||
− | window.parent.setSessionVariable(valueContextVariable, JSON.stringify(selectedItems)); | + | if (valueContextVariable != null && valueContextVariable != "") window.parent.setSessionVariable(valueContextVariable, JSON.stringify(selectedItems)); |
} | } | ||
</script> | </script> | ||
</pre> | </pre> |
Revision as of 21:57, 12 December 2017
This page contains an example of a multiselect dropdown list implemented using HTML Presentation Object. It gets it's options from a dataset, and the selected values are stored to a global context variable as a JSON string array (e.g. ["value1", "value2", "value3"].
To get the dropdown list working with the default settings, create a dataset with name listOptions. The dataset must contain at least two columns: label and value. By default, the dropdown list sets the selections to context variable listSelection.
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 listSelection 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.
- Dropdown list height can be changed using popupHeight option.
- Watermark text can be change using watermarkText option.
Following is the HTML code for the dropdown list:
<input type="text" id="container<#uniqueId>" /> <style> .e-boxes { background-color: #6598cb !important; } .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> var datasetIndentifier = "listOptions"; var valueContextVariable = "listSelection"; var labelColumnName = "label"; var valueColumnName = "value"; var poData<#uniqueId>; var width<#uniqueId> = 0; var selectedValues<#uniqueId>; function <#datasetChangeFunction>(datasetIdentifier, datasetChangeCallbackFunction) { if (datasetIdentifier == datasetIndentifier) datasetChangeCallbackFunction(myDatasetAvailable<#uniqueId>); } function myDatasetAvailable<#uniqueId>(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<#uniqueId> = []; 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<#uniqueId>.push(rowObject); } initializePO<#uniqueId>(); } function <#contextChangeFunction>(changedContextVariables) { if (changedContextVariables[valueContextVariable] != null) { try { selectedValues<#uniqueId> = 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<#uniqueId>.sort(); previouslySelectedValues.sort(); if (previouslySelectedValues.length != selectedValues<#uniqueId>.length || !previouslySelectedValues.every(function(v,i) { return v === selectedValues<#uniqueId>[i]})) { initializePO<#uniqueId>(); } } } } function <#resizeFunction>(newWidth, newHeight) { width<#uniqueId> = newWidth; initializePO<#uniqueId>(); } function initializePO<#uniqueId>() { if ($("#container<#uniqueId>").data("ejDropDownList") != null) $("#container<#uniqueId>").data("ejDropDownList").destroy(); var dropdownList = $("#container<#uniqueId>").ejDropDownList({ dataSource: poData<#uniqueId>, fields: { text: "label", value: "value" }, showCheckbox: true, watermarkText: "Select item(s)", multiSelectMode: "visualmode", enableFilterSearch: true, popupHeight: "400px", }).data("ejDropDownList"); dropdownList.unCheckAll(); dropdownList.selectItemByValue(selectedValues<#uniqueId>); dropdownList.option("change", "valueChanged<#uniqueId>"); var dropdownListWidth = width<#uniqueId> - 18; dropdownList.option("width", (dropdownListWidth < 10 ? 10 : dropdownListWidth)); } function valueChanged<#uniqueId>() { 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]); } if (valueContextVariable != null && valueContextVariable != "") window.parent.setSessionVariable(valueContextVariable, JSON.stringify(selectedItems)); } </script>