ParamQuery grid support forum
General Category => Help for ParamQuery Grid (free version) => Topic started by: pwa@bigpond.net.au on July 09, 2019, 09:22:42 am
-
Hi,
I'm new to Param Query and it looks great! I've successfully populated the grid from one of my database tables, but I can't figure out 2 things:
1) How to write data back to the table once its updated.
2) How to export to CSV. (I'm trying this as a starting point, but the button doesn't do anything, even though I've followed the examples.)
My program is listed below.
Any help is greatly appreciated.
Regards,
Paul
<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!--PQ Grid files-->
<link rel="stylesheet" href="pqgrid.min.css" />
<script src="pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
<link rel="stylesheet" href="themes/office/pqgrid.css" />
<script>
<%
myDSN = "PROVIDER=SQLOLEDB;DATA SOURCE=" & Session("SystemServer") & ";INITIAL CATALOG=" & Session("SystemDatabaseName") & ";UID=" & Session("SystemUserName") & ";PWD=" & Session("SystemPassWord") & ""
mySQL = "select * from mine where active = 'Y' order by minename"
set rs1 = server.createobject("adodb.recordset")
rs1.open mySQL,myDSN
myCount = 1
myArray = "["
Do While Not rs1.EOF
myRowData = "['" & rs1.fields(0) & "', '" & rs1.fields(2) & "', '" & rs1.fields(13) & "', '" & rs1.fields(29) & "', '" & rs1.fields(4) & "']"
myArray = myArray & myRowData
myCount = myCount + 1
rs1.MoveNext
if Not rs1.EOF then
myArray = myArray & ","
end if
Loop
myArray = myArray & "]"
%>
$(function () {
var data = <%=myArray%>;
obj.colModel = [
{ title: "Mine ID", width: 25, dataType: "string", align: "left" },
{ title: "Mine Name", width: 150, dataType: "string", align: "left" },
{ title: "Classic ID", width: 100, dataType: "float", align: "left"},
{ title: "Lat/Long", width: 100, dataType: "string", align: "left"},
{ title: "Active", width: 10, dataType: "string", align: "center" }
];
obj.dataModel = { data: data };
$("#grid_array").pqGrid(obj);
});
var obj = {
width: 1000,
height: 500,
title: "Timesheet Users Table",
numberCell:{resizable:true, title: "#"},
showTitle: true,
height: 'flex',
scrollModel: { autoFit: true },
pageModel: { type: 'local' },
toolbar: {
cls: 'pq-toolbar-export',
items: [{
type: 'button',
label: "Export to CSV",
icon: 'ui-icon-document',
listener: function () {
//debugger;
var zip = $("#zip_file").prop("checked");
this.exportCsv({
url: "/bin",
render: true,
zip: zip,
filename: 'my-file'
});
}
},
{
type: 'checkbox',
style: 'margin-right:10px;',
attr: 'id="zip_file"',
label: 'Zip the file'
}]
}
};
</script>
</head>
<body>
<h1>Pauls Grid Example (https://paramquery.com/)</h1>
<div id="grid_array" style="margin:0px;"></div>
</body>
</html>
-
Paul
In case of export to csv/excel, exported data is send to server url and server responds by composing data in file and sending it as a downloadable file.
The server side code is mentioned in the ASP.NET / PHP / Java tabs in this demo:
https://paramquery.com/demos/export_csv
-
That example doesn't work either. Is it because I'm using the FREE version?
This is the code I cut and assembled from the example you provided, and it doesn't download either.
<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!--PQ Grid files-->
<link rel="stylesheet" href="pqgrid.min.css" />
<script src="pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
<link rel="stylesheet" href="themes/office/pqgrid.css" />
<script>
$(function () {
var data = [
{rank:1, company:'Exxon Mobil',revenues: '339,938.0',profits: '36,130.0'},
{rank:2, company:'Wal-Mart Stores',revenues: '315,654.0', profits:'11,231.0'},
{rank:3, company:'Royal Dutch Shell', revenues:'306,731.0', profits:'25,311.0'},
{rank:4, company:'BP', revenues:'267,600.0',profits: '22,341.0'},
{rank:5, company: 'General Motors',revenues: '192,604.0', profits:'-10,567.0'},
{rank:6, company: 'Chevron', revenues:'189,481.0', profits:'14,099.0'},
{rank:7, company: 'DaimlerChrysler',revenues: '186,106.3',profits: '3,536.3'},
{rank:8, company: 'Toyota Motor', revenues:'185,805.0',profits: '12,119.6'},
{rank:9, company: 'Ford Motor', revenues:'177,210.0',profits: '2,024.0'},
{rank:10, company: 'ConocoPhillips', revenues:'166,683.0', profits:'13,529.0'},
{rank:11, company: 'General Electric',revenues: '157,153.0', profits:'16,353.0'},
{rank:12, company: 'Total', revenues:'152,360.7', profits:'15,250.0'},
{rank:13, company: 'ING Group', revenues:'138,235.3', profits:'8,958.9'},
{rank:14, company: 'Citigroup', revenues:'131,045.0', profits:'24,589.0'},
{rank:15, company: 'AXA', revenues:'129,839.2', profits:'5,186.5'},
{rank:16, company: 'Allianz',revenues: '121,406.0', profits:'5,442.4'},
{rank:17, company: 'Volkswagen', revenues:'118,376.6',profits: '1,391.7'},
{rank:18, company: 'Fortis', revenues:'112,351.4', profits:'4,896.3'},
{rank:19, company: 'Credit Agricole', revenues:'110,764.6', profits:'7,434.3'},
{rank:20, company: 'American Intl. Group', revenues:'108,905.0',profits: '10,477.0'}
];
var obj = {
showTitle: false,
height: 'flex',
scrollModel: { autoFit: true },
pageModel:{type:'local'},
toolbar: {
cls: 'pq-toolbar-export',
items: [{
type: 'button',
label: "Export to CSV",
icon: 'ui-icon-document',
listeners: [{
"click": function (evt) {
$("#grid_export").pqGrid("exportCsv", { url: "/pro/demos/excel" });
}
}]
}]
}
};
obj.colModel = [
{ title: "Rank", width: 100, dataType: "integer",dataIndx:"rank"},
{ title: "Company", width: 200, dataType: "string", dataIndx:"company"},
{ title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx:"revenues" },
{ title: "Profits ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "profits" }
];
obj.dataModel = {
data: data,
location: "local",
sorting: "local",
sortIndx: "profits",
sortDir: "down"
};
var $grid = $("#grid_export").pqGrid(obj);
});
</script>
</head>
<body>
<div id="grid_export" style="margin: auto;">
</div>
</body>
</html>