I am testing out slickgrid.
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slick Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="slick/css/slick.grid.css" type="text/css" />
<script src="jquery.js"></script>
<script src="jquery.event.drag-2.0.min.js"></script>
<script src="slick/js/slick.core.js"></script>
<script src="slick/js/slick.grid.js"></script>
<script src="slick/js/slick.dataview.js"></script>
<script src="main/js/main.js"></script>
</head>
<body>
<div style="float:left">
<input placeholder="EAN Code" type="text" id="ean">
<input placeholder="Quantity" type="text"id="qty">
<input placeholder="Amount" type="text" id="amt">
<input placeholder="Discount" type="text" id="disc">
<button id="add-product">
Add Product
</button>
</div>
<br />
<div id="invoice-grid" style="clear:both">
</div>
</body>
</html>
JS CODE – main.js
var grid, dataView;
var gridOptions, gridColumns;
var products = []
$(function() {
gridColumns = [
{id:'ean', name:'EAN', field:'ean', cssClass: 'grid-cell'},
{id:'qty', name:'Qty', field:'qty', cssClass: 'grid-cell'},
{id:'mrp', name:'MRP', field:'mrp', cssClass: 'grid-cell'},
{id:'disc', name:'Discount', field:'disc', cssClass: 'grid-cell'},
{id:'net_amt', name:'Net Amt', field:'net_amt', cssClass: 'grid-cell'}
];
gridOptions = {
editable: true,
autoEdit: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false,
enableColumnReorder: false,
rowHeight: 35
};
dataView = new Slick.Data.DataView();
grid = new Slick.Grid($('#invoice-grid'), dataView, gridColumns, gridOptions);
updateRows = function(updateData) {
console.log(products);
dataView.beginUpdate();
dataView.setItems(products);
dataView.endUpdate();
grid.updateRowCount();
if (updateData) {
grid.setData(dataView, true);
}
grid.render();
}
updateRows(false);
$("#add-product").click(function() {
ean = $("#ean").val();
qty = $("#qty").val();
amt = $("#amt").val();
disc = $("#disc").val();
if (ean === '' || qty === '' || amt === '' || disc === '')
return;
newProduct = {
id: ean,
ean: ean,
qty: qty,
amt: amt,
disc: disc,
net_amt: (amt - disc)
}
products.push(newProduct)
updateRows(true);
$("#ean").val('');
$("#qty").val('');
$("#amt").val('');
$("#disc").val('');
});
});
The aim of the page is take values from the input textboxes and put them in the grid as new entry. There seems to be something wrong with the script I have written though because no new rows are being created and the grid-canvas element canvas is as follows (no matter how manyelements i add to it).
<div class="grid-canvas" style="height: 35px; width: 400px;">
<div class="ui-widget-content slick-row even" style="top:0px">
<div class="slick-cell l0 r0 grid-cell">1</div>
<div class="slick-cell l1 r1 grid-cell">1</div>
<div class="slick-cell l2 r2 grid-cell"></div>
<div class="slick-cell l3 r3 grid-cell">1</div>
<div class="slick-cell l4 r4 grid-cell">0</div>
</div>
</div>
I seem to have understood slickgrid’s implementation wrong. Could anyone direct me the right way?
I have solved the issue by adding the following style to my
invoice-gridI am not sure why styling is affecting addition of rows though.