Reputation: 263
I have a pretty simple slickGrid example that I'm trying to populate from MS Access via ADODB. I've converted the Table into a JSON-like object (resulting in an exact copy of raw data that actually displays fine):
<script type="text/javascript">
var pad = "C:\\wamp\\www\\Test\\db1.mdb";
var cn = new ActiveXObject("ADODB.Connection");
var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + pad;
cn.Open(strConn);
var rs = new ActiveXObject("ADODB.Recordset");
var SQL = "SELECT * FROM Parts";
rs.Open(SQL, cn);
if(!rs.bof) {
rs.MoveFirst();
}
// Build JSON for SlickGrid... set first instance to ''
var JSONobj='';
var i=1;
// while(!rs.eof) {
while(i<3) {
JSONobj=JSONobj+"{id:" + i + ", "+"PartID:'" + rs.fields(1).value + "', "+"Date:'" + rs.fields(2).value + "', " + "Project:'" + rs.fields(3).value + "', " + "Product:'" + rs.fields(4).value + "', " + "First_Name:'" + rs.fields(5).value + "', " + "Last_Name:'" + rs.fields(6).value + "', " + "Firm:'" + rs.fields(7).value + "', " + "Role:'" + rs.fields(8).value +"'},";
i=i+1
rs.MoveNext();
}
// Remove last comma on JSON
var strLen = JSONobj.length;
JSONobj = JSONobj.slice(0,strLen-1);
JSONobj = JSONobj.replace(/null/g, " ");
//else {
//document.write("No data found");
//};
rs.Close();
cn.Close();
</script>
The grid renders with no errors but I have no data. Here's the entire code source (except the above conversion methods):
> <!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<!-- Load initial styles/js -->
<link rel="stylesheet" href="css/slickgrid/slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/slickgrid/examples.css" type="text/css" media="screen" charset="utf-8" />
<script language="javaScript" src="js/jquery-1.4.3.min.js"></script>
</head>
<body>
<div id="pageContainer">
<div id="myGrid" class="grid"></div>
</div>
<!-- SlickGrid dependant files -->
<script language="javascript" src="js/jquery/jquery-1.4.3.min.js"></script>
<script language="javascript" src="js/jquery/jquery-ui-1.8.5.custom.min.js"></script>
<script language="javascript" src="js/jquery/jquery.event.drag-2.0.min.js"></script>
<script language="javascript" src="js/slickgrid/slick.core.js"></script>
<script language="javascript" src="js/slickgrid/plugins/slick.rowselectionmodel.js"></script>
<script language="javascript" src="js/slickgrid/slick.grid.js"></script>
<script language="javascript" src="js/slickgrid/slick.groupitemmetadataprovider.js"></script>
<script language="javascript" src="js/slickgrid/slick.dataview.js"></script>
<!-- XXXXXXXXXXXXXXX jQ Date/Calendar XXXXXXXXXXXXX -->
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript">
var dataView;
var grid;
var data = [];
var rows = [];
var initialSortOrder = {};
var options = {
enableCellNavigation:true,
enableColumnReorder:true,
editable:false,
sortable:true,
rowHeight:25
// rowHeight:23
};
initialSortOrder.sortBy = "symbol";
initialSortOrder.sortDirection = "ASC";
var columns = [
{id:"PartID", name:"Part ID", field:"PartID", width:86, sortable:true},
{id:"Date", name:"Date", field:"Date", width:80, sortable:true},
{id:"Project", name:"Project", field:"Project", width:140, sortable:true},
{id:"Product", name:"Product", field:"Product", width:115, sortable:true},
{id:"First_Name", name:"First Name", field:"First_Name", sortable:true},
{id:"Last_Name", name:"Last Name", field:"Last_Name", width:75, sortable:true},
{id:"Firm", name:"Firm", field:"Firm", width:140, sortable:true},
{id:"Role", name:"Role", field:"Role", width:140, sortable:true},
{id:"Action", name:"Action", field:"Action", width:140, sortable:true}
];
$(function() {
data = [JSONobj];
dataView = new Slick.Data.DataView();
grid = new Slick.Grid($("#myGrid"), data, columns, options);
// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function(e,args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function(e,args) {
grid.invalidateRows(args.rows);
grid.render();
});
grid.setSelectionModel(new Slick.RowSelectionModel());
// initialize the model after all the events have been hooked up
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
})
</script>
</body>
</html>
Any help appreciated... thanks
Upvotes: 0
Views: 747
Reputation: 263
Okay, here's the connection string I'm using and how it maps the data into the columns:
$(function() {
// Open DB & dump data into SlickGrid
var pad = "C:\\wamp\\www\\Test\\db1.mdb";
var cn = new ActiveXObject("ADODB.Connection");
var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + pad;
cn.Open(strConn);
var rs = new ActiveXObject("ADODB.Recordset");
var SQL = "SELECT * FROM Table1";
rs.Open(SQL, cn);
if(!rs.bof) {
rs.MoveFirst();
}
var i=0;
while(!rs.eof) {
var d = (data[i] = {});
d["id"] = "id_" + i;
d["PartID"] = rs.fields(1).value;
d["Date"] = rs.fields(2).value;
d["Project"] = rs.fields(3).value;
d["Product"] = rs.fields(4).value;
d["First_Name"] = rs.fields(5).value;
d["Last_Name"] = rs.fields(6).value;
d["Firm"] = rs.fields(7).value;
d["Role"] = rs.fields(8).value;
i=i+1
rs.MoveNext();
}
rs.Close();
cn.Close();
As you can see, the db file is mapped to a physical HD location... which sounds right since it's probably is a security violation otherwise (browsers don't, generally, have access to Read from/Write to a clients machine).
Upvotes: 1
Reputation: 3276
Give your grid an explicit height. For example:
<div id="myGrid" class="grid" style="height:400px"></div>
That is what fixed it for me when I had similar issues. I've since moved to setting the height using jQuery based on the window size and using a resize callback, which fit my needs nicely.
Upvotes: 0