KB - Wijmo 5 - MultiSelect Custom Editor

This sample shows how to insert the MultiSelect control inside of cells of a FlexSheet.

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://prerelease.componentone.com/wijmo5/latest/styles/wijmo.min.css">
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.input.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.grid.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.grid.sheet.min.js"></script>
<div class="container">
	<h1>
		FlexSheet with Custom Editors
	</h1>
	<p>
		Edit the "Country" column using a ComboBox.
	</p>
	<div id="flexSheet" style="height:300px;"></div>
</div>

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
listOfCountries = [],
			data = [],
			bigList = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'];
			
		for (var i = 0; i < countries.length; i++) {
			data.push({
				country: countries[i],
				downloads: Math.round(Math.random() * 20000),
				sales: Math.round(Math.random() * 10000),
				expenses: Math.round(Math.random() * 5000)
			});
		}
		// create the FlexSheet control
		var flexSheet = new wijmo.grid.sheet.FlexSheet('#flexSheet', {
				itemFormatter: function(panel, r, c, cell){
					var editRange = panel.grid.editRange;
					if(panel.cellType == wijmo.grid.CellType.Cell && editRange && editRange.row === r && editRange.col === c) {				
						if(panel.grid.columns[c].header === 'Country'){
							cell.childNodes[0].style.display = 'none';
							cell.style.overflow = 'visible';
              var innerCellValue = panel.grid.getCellData(r, c, false).split(',');
							var cmbRoot = document.createElement('div');
							var cmb = new wijmo.input.MultiSelect(cmbRoot, {
								itemsSource: listOfCountries,
                placeholder: 'No Options Available',
								checkedItems: innerCellValue,
                isDroppedDownChanging: function(s, e) {
                  for(var i = 0; i < s.itemsSource.length; i++) {
                  	for(var j = 0; j < s.checkedItems.length; j++) {
                    	if(s.itemsSource[i] == s.checkedItems[j]) {
                      	var tempItem = s.itemsSource[i];
                        var tempSource = s.itemsSource;
                        tempSource.splice(i, 1);
                        tempSource.splice(0, 0, tempItem);
                        s.itemsSource = tempSource;
                        s.refresh();
                        console.log(tempSource);
                      }
                    }
                  }
                }
							});
							cell.style.padding = '0';
              cell.appendChild(cmbRoot);
							cmb.focus();
							var...