HTML Presentation Object: Multiselect dropdown list

This is an example of a multiselect dropdown list, which gets it's options from a dataset, and selected values are stored to a session context variable as JSON string array (e.g. ["value1", "value2", "value3"].

Following settings can be done:

• Create a dataset with name listOptions.
• Selected values are updated to context variable listValue.
• Visible name in the dropdown list is from column label and value column to store to the context variable is value.
• Dropdown list height can be changed using popupHeight
• Watermark text can be change using watermarkText

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;
}
</style>

<script>
var valueContextVariable = "listValue";
var labelColumnName = "label";
var valueColumnName = "value";
var poData<#uniqueId>;
var width<#uniqueId>;
var height<#uniqueId>;

function <#datasetChangeFunction>(datasetIdentifier, datasetChangeCallbackFunction) {
  if (datasetIdentifier == "listOptions") 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);
  }
  drawPO<#uniqueId>();
}

function <#resizeFunction>(newWidth, newHeight) {
  if (newWidth == 0 || newHeight == 0) return;
  width<#uniqueId> = newWidth;
  height<#uniqueId> = newHeight;
  $("#container<#uniqueId>").width(newWidth);
  $("#container<#uniqueId>").height(newHeight);
  drawPO<#uniqueId>();
  $("#container<#uniqueId>").data("ejDropDownList").option("width", (newWidth - 18));
}

function drawPO<#uniqueId>() {
  if (poData<#uniqueId> == null) return;
  $("#container<#uniqueId>").ejDropDownList({
    dataSource: poData<#uniqueId>,
    fields: { text: "label", value: "id" },
    showCheckbox: true,
    watermarkText: "Select item(s)",
    multiSelectMode: "visualmode",
    enableFilterSearch: true,
    popupHeight: "400px",
    change: "valueChanged<#uniqueId>",
  });
}

function valueChanged<#uniqueId>() {
  var dropdownList = $("#container<#uniqueId>").data("ejDropDownList");
  var selectedItemIndeces = dropdownList.model.selectedItems;
  var selectedItems = [];
  for (var i = 0; i < selectedItemIndeces.length; i++) {
    selectedItems.push(dropdownList.model.dataSource[selectedItemIndeces[i]][valueColumnName]);
  }
  window.parent.setSessionVariable(valueContextVariable, JSON.stringify(selectedItems));
}
</script>