JavaScript ComboBox

Set the multiSelect property of the jqxComboBox. Author: http://jqwidgets.com

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="HealthScreeningInfo"></div>

JavaScript

var dataHealthScreening = [
  { MemberID: 1001, Test: "Test A", Year: 2020, Result: "Result A" },
  { MemberID: 2002, Test: "Test B", Year: 2021, Result: "Result B" }
];

var sourceHealthScreening = {
  localdata: dataHealthScreening,
  datatype: "array",
  datafields: [
    {
      name: "MemberID",
      type: "number"
    },
    {
      name: "Test",
      type: "string"
    },
    {
      name: "Year",
      type: "number"
    },
    {
      name: "Result",
      type: "string"
    }
  ]
};

var dataAdapterHealthScreening = new $.jqx.dataAdapter(sourceHealthScreening, {
  downloadComplete: function(dataHealthScreening, status, xhr) {},
  loadComplete: function(dataHealthScreening) {},
  loadError: function(xhr, status, error) {}
});

/* var getEditorDataAdapter = function(datafield) {
  var dataAdapterHealthScreening = new $.jqx.dataAdapter(sourceHealthScreening, { uniqueDataFields: [datafield] });
  return dataAdapterHealthScreening;
}; */

$("#HealthScreeningInfo").jqxGrid({
  source: dataAdapterHealthScreening,
  editable: true,
  selectionmode: "checkbox",
  altrows: true,
  editmode: "click",
  columns: [
    {
      text: "MemberID",
      datafield: "MemberID",
      hideable: "true",
      hidden: "true"
    },
    {
      text: "Test",
      columntype: "template",
      // columntype: "dropdownlist",
      datafield: "Test",
      width: "45%",
      cellsalign: "center",
      align: "center",
      initeditor: function(editedRow, cellvalue, editor) {
        endRow = editedRow;
        var healthScreening = ["Test A", "Test B"];
        
        editor.jqxDropDownList({
          source: healthScreening,
          width: "45%",
          placeHolder: "Choose:",
          autoOpen: true,
          animationType: "fade"
        });
        
        /* editor.on("select", function(event) {
          console.log("-Test- select");
          
          $("#HealthScreeningInfo").jqxGrid("endcelledit", endRow, "Test", false);
        }); */
        
     ...