Handsontable checkbox's not working - handsontable

Question

Real simple, I've been trying to get the checkbox type to render on my list, but all I get is the value "no." Here's my settings object. Am I doing something wrong? The list renders perfectly and works properly in terms of conditional coloring, etc., just no checkboxes. HELP! and thank you.
settings = {
data: bulkListData
,dataSchema: {name: {first: null, last: null}, email: null,status: null,action: null}
,colHeaders: ['First Name', 'Last Name', 'Email','Status','Action']
,columns: [
{data: 'name.first'},
{data: 'name.last'},
{data: 'email'},
{data: 'status'},
{data: 'action'
,type: 'checkbox'
,checkedTemplate: 'yes'
,uncheckedTemplate: 'no'
}
]
,colWidths:[200,200,300,120,120]
,startRows: 5
,startCols: 5
,minRows: 5
,minCols: 5
,maxRows: 10
,maxCols: 5
,minSpareRows: 5
,autoWrapRow:true
,contextMenu: true}

Answer 1

I put your sample code in a fiddle and it works for me.
The only thing I needed was to fill in the bulkListData accordingly, otherwise everything is exactly like yours. Perhaps you are making the mistake exactly there - are your action properties in this array in the form of yes/no string?

Answer 2

I have a renderer that changes the color of a column. When this renderer is used the check boxes change to 'yes'/'no'.
When the renderer is not used the checkboxes show.
$(document).ready(function () { function getCompData() {
return [
{Comp: "Annually", year: 2006, Retirement: 'yes'},
{Comp: "Monthly", year: 2008, Retirement: 'yes'},
{Comp: "Quarterly", year: 2011, Retirement: 'no'},
{Comp: "Semi-Annually", year: 2004, Retirement: 'yes'},
{Comp: "Semi-Monthly", year: 2011, Retirement: 'no'}
];}function cellColorRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.TextCell.renderer.apply(this, arguments);
if (col === 1) {
td.style.textAlign = 'right';
td.style.backgroundColor = "#ccffcc";
}
}var example2 = document.getElementById('example2'); var hot2 = new Handsontable(example2,{ data: getCompData(),
startRows: 7,
startCols: 4,
colHeaders: ["Comp", "Year", "401K"],
colWidths: [120, 50, 60],
columnSorting: true,
columns: [
{
data: "Comp"
},
{
data: "year",
type: 'numeric'
},
{
data: "Retirement",
type: "checkbox",
checkedTemplate: 'yes',
uncheckedTemplate: 'no'
}
], cells:
function (row, col, prop) {
var cellProperties = {};
cellProperties.renderer = cellColorRenderer;
return cellProperties;
}, }); });
Here is the code in jsfiddle
http://jsfiddle.net/w42cp1y8/1/

Answer 3

Just use CheckboxRenderer instead TextRenderer:
$element.handsontable( {
cells: function( row, col, prop ) {
return {
renderer: function( instance, td, row, col, prop, value, cellProperties ) {
Handsontable.renderers.CheckboxRenderer.apply( this, arguments );
td.style.backgroundColor = value ? 'red' : 'white';
td.style.textAlign = 'center';
},
type: 'checkbox'
};
}
} );

Answer 4

jExcel is an alternative to handsontable. The example below is using a checkbox column type:
data = [
['Brazil', 'Classe A', 'Cheese', 1, '2017-01-12'],
['Canada', 'Classe B', 'Apples', 1, '2017-01-12'],
['USA', 'Classe A', 'Carrots', 1, '2017-01-12'],
['UK', 'Classe C', 'Oranges', 0, '2017-01-12'],
];
$('#my').jexcel({
data:data,
colHeaders: [ 'Country', 'Description', 'Type', 'Stock', 'Next purchase' ],
colWidths: [ 300, 80, 100, 60, 120 ],
columns: [
{ type: 'text' },
{ type: 'text' },
{ type: 'dropdown', source:[ {'id':'1', 'name':'Fruits'}, {'id':'2', 'name':'Legumes'}, {'id':'3', 'name':'General Food'} ] },
{ type: 'checkbox' },
{ type: 'calendar' },
]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.2.2/css/jquery.jexcel.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.2.2/js/jquery.jexcel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.2.2/js/jquery.jcalendar.min.js"></script>
<div id="my"></div>