multi combo in grid

by dkamburov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js/apiviewer.js"></script>
<script src="https://igniteui.com/js-data/northwind"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>

<table cellspacing="0" cellpadding="0" class="pmd-table table table-bordered" id="table-printer-fax-scan-tab-info">

</table>

CSS

fieldset.explorer
        {
            float: left;
            width: 45%;
        }
        #sampleContainer fieldset input[type="checkbox"] + label
        {
            display: inline;
        }
        .addNewRow
        {
            width: 100%;
            list-style-type: none;
        }
        .addNewRow li
        {
            display: inline-block;
            float: left;
            margin-right: 1em;
            height: 60px;
        }
        .ui-igedit
        {
            margin: 2px 0px 2px 0px;
        }

JavaScript

$.ig.ComboEditorProviderCustom = $.ig.EditorProviderCombo.extend({

    getValue: function () {

        var val = this.editor.value();

        var text = this.editor.text();

        if ($.type(val) === "array" && val.length) {

            //When the passed value is of complex type return the text instead.

            //This will be the value saved in the grid data source after editing ends.

            return val.join(',');

            //return val;

        }

        return val;

    },

    setValue: function (val, fire) {

        var array = [];

        this.editor.deselectAll();

        if (this.options.multiSelection.enabled && val.contains(this.options.multiSelection.itemSeparator)) {

            //if multiSelection is enabled and the value passed from the grid cell to the edito contains the specified itemSeparator

            //Then split the value by the separator and set a complex value back to the editor so that the matching items will get selected.

            array = val.split(this.options.multiSelection.itemSeparator);

            return this.editor.value(array, null, fire);

        }

        this.editor.value(val, null, fire);

    }

});

function formatCategoryCombo(val) {
console.log(val)
	var vals = val.split(",");
  var result = [];
  var i, facility;
  var comboData = [{"facilityName": "foo", "facilityId": "1"},{"facilityName": "bar", "facilityId": "2"},{"facilityName": "bas", "facilityId": "3"}];
  for (i = 0; i < comboData.length; i++) {
    facility = comboData[i];
    if (vals.indexOf(facility.facilityId) !== -1) {
      result.push(facility.facilityName);
    }
  }

  return result.join(",");
}


$("#table-printer-fax-scan-tab-info").igGrid({

    dataSource: [{documentID: 1, facilityIds: ["1", "2"]}],

    autoGenerateColumns: true,

    primaryKey: "documentID",

    autoCommit: true,

    columns: [

        { headerText: "DocumentID", headerCssClass: "", key: "documentID", dataType: "number", columnCssClass: "",...