CODEWITHSUNDEEP
slickgridadodb
user1415445
user1415445

Reputation: 263

SlickGrid ADODB (MS Access) example

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

Answers (2)

user1415445
user1415445

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

Edward
Edward

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

Related Questions