HTML Presentation Object: Multiselect dropdown list

1. Create a dataset with name listOptions.
2. Selected values are updated to context variable listValue.
3. Visible name in the dropdown list is from column label and value column to store to the context variable is value.

<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>