Hi,
I'm trialing the free version of Param Grid because it looks great! I am attempting to populate it using an SQL query to my database. I have structured the results from the query like the default example in the provided array.htm, but when I render the grid I only get 1 character per column, even though the variable I store the array in is identical to the default array in the array.htm example. Any clues that could help me?
Thanks,
Paul
THIS IS THE DEFAULT ARRAY THATS PROVIDED (THE ONE I CREATED I AT THE END) ...
var data = [
[1, 'Exxon Mobil', 339938.0, 36130.0],
[2, 'Wal-Mart Stores', 315654.0, 11231.0],
[3, 'Royal Dutch Shell', 306731.0, 25311.0],
[4, 'BP', 267600.0, 22341.0],
[5, 'General Motors', 192604.0, -10567.0],
[6, 'Chevron', 189481.0, 14099.0],
[7, 'DaimlerChrysler', 186106.3, 3536.3],
[8, 'Toyota Motor', 185805.0, 12119.6],
[9, 'Ford Motor', 177210.0, 2024.0],
[10, 'ConocoPhillips', 166683.0, 13529.0],
[11, 'General Electric', 157153.0, 16353.0],
[12, 'Total', 152360.7, 15250.0],
[13, 'ING Group', 138235.3, 8958.9],
[14, 'Citigroup', 131045.0, 24589.0],
[15, 'AXA', 129839.2, 5186.5],
[16, 'Allianz', 121406.0, 5442.4],
[17, 'Volkswagen', 118376.6, 1391.7],
[18, 'Fortis', 112351.4, 4896.3],
[19, 'Crédit Agricole', 110764.6, 7434.3],
[20, 'American Intl. Group', 108905.0, 10477.0]
];
MINE LOOKS LIKE THIS ...
[1, 'Argo', 100.00, 200.00],
[2, 'Belleisle', 100.00, 200.00],
[3, 'Cave Rocks', 100.00, 200.00],
[4, 'Cosmo Howley', 100.00, 200.00],
[5, 'Brocks Creek', 100.00, 200.00]
AND I INJECT THIS VARIABLE VALUE INTO THE PARAM QUERY JAVASCRIPT LIKE THIS ...
var data = [ "<%=myArray%>" ]
THIS IS THE FULL SOURCE CODE OF MY EXAMPLE ...
<!DOCTYPE html>
<html>
<head>
<!--jQuery dependencies-->
<link rel="stylesheet" href="
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!--PQ Grid files-->
<link rel="stylesheet" href="pqgrid.min.css" />
<link rel="stylesheet" href="pqgrid.ui.min.css" />
<!--office theme-->
<link rel='stylesheet' href='themes/office/pqgrid.css' />
<script src="pqgrid.min.js"></script>
<!--for localization and intellisense -->
<script src="localize/pq-localize-en.js"></script>
<!--jqueryui touch punch for touch devices-->
<script src="touch-punch/touch-punch.min.js"></script>
<!--jsZip for zip and xlsx import/export-->
<script src="jsZip-2.5.0/jszip.min.js"></script>
<style>
*{
font-size:12px;
font-family: Arial;
}
</style>
<%
Session("SystemServer") = "XXXXXXXXX"
Session("SystemDatabaseName") = "XXXXXXXXX"
Session("SystemUserName") = "XXXXXXXXX"
Session("SystemPassWord") = "XXXXXXXXX"
myDSN = "PROVIDER=SQLOLEDB;DATA SOURCE=" & Session("SystemServer") & ";INITIAL CATALOG=" & Session("SystemDatabaseName") & ";UID=" & Session("SystemUserName") & ";PWD=" & Session("SystemPassWord") & ""
mySQL = "Select top 5 * from Mine order by MineID"
set rs1 = server.createobject("adodb.recordset")
rs1.open mySQL,myDSN
myArray = ""
Do While Not rs1.EOF
myRowData = "[" & rs1.fields(0) & ", '" & rs1.fields(2) & "', 100.00, 200.00]"
myArray = myArray & myRowData
rs1.MoveNext
if rs1.EOF then
myArray = myArray & "<br>"
exit do
else
myArray = myArray & ",<br>"
end if
Loop
'response.write myArray
'response.end
%>
<script>
$(function () {
var data = [ "<%=myArray%>" ]
var obj = {
numberCell:{resizable:true,title:"#",width:30,minWidth:30},
editor: {type: 'textbox'},
title: "Pauls Data Grid",
resizable:true,
scrollModel:{autoFit:true, theme:true}
};
obj.colModel = [
{ title: "Record", width: 100, dataType: "integer" },
{ title: "Mine Name", width: 200, dataType: "string" },
{ title: "Number 1", width: 150, dataType: "string", format: '$#,###.00'},
{ title: "Number 2", width: 150, dataType: "string", format: '$#,###.00'},
{ title: "Number 2", width: 150, dataType: "float", format: '$#,###.00'},
{ title: "Number 2", width: 150, dataType: "float", format: '$#,###.00'},
{ title: "Number 2", width: 150, dataType: "float", format: '$#,###.00'},
{ title: "Number 2", width: 150, dataType: "float", format: '$#,###.00'},
{ title: "Number 2", width: 150, dataType: "float", format: '$#,###.00'},
{ title: "Number 2", width: 150, dataType: "float", format: '$#,###.00'},
{ title: "Number 2", width: 150, dataType: "float", format: '$#,###.00'}
];
obj.dataModel = { data: data };
$("#grid_array").pqGrid(obj);
});
</script>
</head>
<body>
<div id="grid_array" style="margin:100px;"></div>
<%response.write myArray%>
</body>
</html>
Show Posts