<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/dist/handsontable.css">
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/dist/pikaday/pikaday.css">
<script src="http://past.handsontable.com/dist/pikaday/pikaday.js"></script>
<script src="http://past.handsontable.com/dist/moment/moment.js"></script>
<script src="http://past.handsontable.com/dist/numbro/numbro.js"></script>
<script src="http://past.handsontable.com/dist/numbro/languages.js"></script>
<script src="http://past.handsontable.com/dist/handsontable.js"></script>
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/demo/css/samples.css?20140331">
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
</style>
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/dist/handsontable.css">
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/dist/pikaday/pikaday.css">
<script src="http://past.handsontable.com/dist/pikaday/pikaday.js"></script>
<script src="http://past.handsontable.com/dist/moment/moment.js"></script>
<script src="http://past.handsontable.com/dist/numbro/numbro.js"></script>
<script src="http://past.handsontable.com/dist/numbro/languages.js"></script>
<script src="http://past.handsontable.com/dist/handsontable.js"></script>
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://past.handsontable.com/demo/css/samples.css?20140331">
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
<h2>Select editor</h2>
<p>Select editor should be considered an example how to write editors rather than used as a fully featured
editor. It is a much simpler form of the <a href="dropdown.html">Dropdown editor</a>. It is suggested to
use the latter
in your projects.</p>
<div id="example1" class="handsontable htColumnHeaders"></div>
<p>
<button name="dump" data-dump="#example1" data-instance="hot1" title="Prints current data source to Firebug/Chrome Dev Tools">
Dump data to console
</button>
</p>
function customDropdownRenderer(instance, td, row, col, prop, value, cellProperties) {
if (instance.getCell(row, col)) {$(instance.getCell(row,col)).addClass('select2dropdown');
}
var selectedId;
var colOptions = cellProperties.selectOptionsData;
if (colOptions != undefined) {
for (var index = 0; index < colOptions.length; index++) {
if (parseInt(value) === colOptions[index].id) {
selectedId = colOptions[index].id;
value = colOptions[index].text;
}
}
Handsontable.cellTypes.dropdown.renderer.apply(this, arguments);
}
}
$(document).ready(function () {
var container = document.getElementById("example1"),
hot1;
hot1 = new Handsontable(container, {
data: [
['2008', '1', 11],
['2009', '2', 11],
['2010', '1', 15]
],
colHeaders: true,
contextMenu: false,
columns: [
{},
{
editor: 'select',
type: "dropdown",
renderer: customDropdownRenderer,
selectOptionsData: [{id:1,text:'Kia'},{id:2,text:'222Kia'}],
selectOptions: ['Kia','222Kia']
},
{}
]
});
function bindDumpButton() {
Handsontable.dom.addEvent(document.body, 'click', function (e) {
var element = e.target || e.srcElement;
if (element.nodeName == "BUTTON" && element.name == 'dump') {
var name = element.getAttribute('data-dump');
var instance = element.getAttribute('data-instance');
var hot = window[instance];
console.log('data of ' + name, hot.getData());
}
});
}
bindDumpButton();
});