H*wdy all,
I’m trying to SlickGrid working, by following the getting started instructions.
But my grid is not editable. Nothing happens when I click on a cell.
Here is my HTML/JS. I verified that all of the src’s are being found.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<style>
</style>
<script src="lib/firebugx.js"></script>
<script src="lib/jquery-1.7.min.js"></script>
<script src="lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="lib/jquery.event.drag-2.0.min.js"></script>
<script src="slick.core.js"></script>
<script src="plugins/slick.cellrangedecorator.js"></script>
<script src="plugins/slick.cellrangeselector.js"></script>
<script src="plugins/slick.cellselectionmodel.js"></script>
<script src="slick.editors.js"></script>
<script src="slick.grid.js"></script>
<script type="text/javascript">
var rows = [
{
field_1: 2,
field_2: "value2",
id: 1
}, {
field_1: 3,
field_2: "value4",
id: 2
}
];
var columns = [
{
name: "Address",
field: "field_1",
id: "field_1",
},
{
name: "Rating",
field: "field_2",
id: "field_2",
},
];
var options = {
enableCellNavigation: true,
editable: true,
asyncEditorLoading: false,
autoEdit: false,
};
$(document).ready(function(){
//See https://github.com/mleibman/SlickGrid/wiki/Getting-Started
//for information on setting up SlickGrid.
var slickgrid = new Slick.Grid("#platewell_grid", rows, columns, options);
$('#platewell_grid').show();
slickgrid.setSelectionModel(new Slick.CellSelectionModel());
slickgrid.updateRowCount();
slickgrid.render();
});
</script>
</head>
<body>
<div style="width:600px;">
<div id="platewell_grid" style="width:100%;height:500px;"></div>
</div>
</body>
</html>
You grid is not editable because you have not specified any editors in the column definitions.