ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: sudo on May 13, 2014, 03:30:25 am
-
Here is a skinny sample: the refresh does not work - also what version of jquery to use with PRO purchase. Thanks
Here is the TestRefresh.js Class;
(function (window) {
// Constructor
function TestRefresh() {
}
TestRefresh.prototype.init = function (dataSet) {
if (dataSet == 'setone') {
var title = '';
var data = [
[1, 'Exxon Mobil', '339,938.0', '36,130.0'],
[2, 'Wal-Mart Stores', '315,654.0', '11,231.0'],
[3, 'Royal Dutch Shell', '306,731.0', '25,311.0'],
[4, 'BP', '267,600.0', '22,341.0'],
[5, 'General Motors', '192,604.0', '-10,567.0'],
[6, 'Chevron', '189,481.0', '14,099.0'],
[7, 'DaimlerChrysler', '186,106.3', '3,536.3'],
[8, 'Toyota Motor', '185,805.0', '12,119.6'],
[9, 'Ford Motor', '177,210.0', '2,024.0'],
[10, 'ConocoPhillips', '166,683.0', '13,529.0'],
[11, 'General Electric', '157,153.0', '16,353.0'],
[12, 'Total', '152,360.7', '15,250.0'],
[13, 'ING Group', '138,235.3', '8,958.9'],
[14, 'Citigroup', '131,045.0', '24,589.0'],
[15, 'AXA', '129,839.2', '5,186.5'],
[16, 'Allianz', '121,406.0', '5,442.4'],
[17, 'Volkswagen', '118,376.6', '1,391.7'],
[18, 'Fortis', '112,351.4', '4,896.3'],
[19, 'Crédit Agricole', '110,764.6', '7,434.3'],
[20, 'American Intl. Group', '108,905.0', '10,477.0']
];
title = "Data Set One"
}
if (dataSet == 'settwo') {
var data = [
[1, 'Go Mobil', '339,938.0', '36,130.0'],
[2, 'Lowes Stores', '315,654.0', '11,231.0'],
[3, 'Shell Gas', '306,731.0', '25,311.0'],
[4, 'BP Me Please', '267,600.0', '22,341.0'],
[5, 'Specific Motors', '192,604.0', '-10,567.0'],
[6, 'Peter Pan', '189,481.0', '14,099.0'],
[7, 'never a Chrysler', '186,106.3', '3,536.3'],
[8, 'Toyota Fails again', '185,805.0', '12,119.6'],
[9, 'Ford Motor', '177,210.0', '2,024.0'],
[10, 'American Intl. Group', '108,905.0', '10,477.0']
];
title = "Data Set Two"
}
var obj = { width: 700, height: 300,
title: title,
numberCell: {resizable: true, title: "#"},
editable: false,
flexWidth: true,
showBottom: false,
resizable: true };
obj.colModel = [
{ title: "Rank", width: 100, dataType: "integer" },
{ title: "Company", width: 200, dataType: "string" },
{ title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right" },
{ title: "Profits ($ millions)", width: 150, dataType: "float", align: "right" }
];
obj.dataModel = { data: data };
var $grid = $("#grid_array").pqGrid(obj);
$grid.pqGrid('refresh');
}
// Expose the class to the window
window.TestRefresh = TestRefresh;
})(window);
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="../css/pqgrid.min.css">
<title></title>
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui-1.10.4.js"></script>
<script src="pqgrid.min.js"></script>
<script src="TestRefresh.js"></script>
<script>
var testRefresh = new TestRefresh();
function init() {
testRefresh.init('setone');
}
function loadSetOne() {
testRefresh.init('setone');
}
function loadSetTwo() {
testRefresh.init('settwo');
}
</script>
</head>
<body onload="init()">
<div id="grid_array" style="margin:auto;"></div>
<a href="#" onclick="loadSetOne();" >Load Set One</a>
<a href="#" onclick="loadSetTwo();" >Load Set Two</a>
</body>
</html>
-
Changing the reference to dataModel.data calls for refreshDataAndView instead of refresh.
Another point: There is no need to pass the whole obj to pqGrid constructor when you change the data only. obj is to be passed only once during initialization.
So when you want to change to new data, please use this:
$grid.pqGrid( "option", "dataModel.data", newdata );
$grid.pqGrid( "refreshDataAndView" );
Dependencies: jQuery >= 1.7, jQueryUI >= 1.9.2
-
Thanks you that worked for data.... but how do you refresh the entire dataModel? Your API documentation only shows how to set the data in the data in the data model.
Get or set the dataModel option, after initialization:
//getter
var dataModel=$( ".selector" ).pqGrid( "option", "dataModel" );
//setter
$( ".selector" ).pqGrid( "option", "dataModel", { data: dataSales } ); <= Data not the dataModel
I am using remote data model:
obj.dataModel = {
dataType: 'JSON',
location: "remote",
method: 'POST',
sorting: "local",
sortIndx: "id_studies",
sortDir: "up",
url: 'php/TransactionHandler.php?transActionID=listStudies&country=' + country,
getData: function (dataJSON) {
return { data: dataJSON.data };
}
};
// How to set entire datamodel with the new data and the new parameters(sorting, sortDir, etc)?
?????? => studyGrid.pqGrid( "option", "dataModel.getData", dataJSON.data );
studyGrid.pqGrid( "refreshDataAndView" );
-
you can set entire new dataModel like this:
$grid.pqGrid( 'option', 'dataModel', newdataModel );
$grid.pqGrid( 'refreshDataAndView' ); //to see the result of dataModel changes.
-
Thanks for the responses. quotes were left off the dataModel option: $grid.pqGrid( "option", "dataModel", 'newdataModel');
So now another issue has surfaced: the getData Post does not occur, not sure what is the catalyst for firing that off... the console.log('getData fired"); Never shows up the console log when this method gets called.. the console.log('Refresh called'); does show up... so the method is firing. So what is the catalyst for the firing off the getData? Should I just move to a ajax request for the data and use it's features to assure it's fired and the data has been returned?
StudyGrid.prototype.loadData = function (country, teamName) {
studyObjTbl.dataModel = {
dataType: 'JSON',
location: "remote",
method: 'POST',
sorting: "local",
sortIndx: "id_studies",
sortDir: "up",
url: 'php/TransactionHandler.php?transActionID=listStudies&country=' + country,
getData: function (dataJSON) {
console.log ('getData fired');
return { data: dataJSON.data };
}
};
studyGrid.pqGrid( "option", "dataModel", 'newdataModel');
studyGrid.pqGrid( "refreshDataAndView" );
console.log('Refresh called');
studyGrid.pqGrid('option', 'title', teamName + ' Studies');
}
-
there are no quotes around newdataModel. It's not a string but a plain js object.
var newdataModel = {
dataType: 'JSON',
location: "remote",
method: 'POST',
sorting: "local",
sortIndx: "id_studies",
sortDir: "up",
url: 'php/TransactionHandler.php?transActionID=listStudies&country=' + country,
getData: function (dataJSON) {
console.log ('getData fired');
return { data: dataJSON.data };
}
};
studyGrid.pqGrid( "option", "dataModel", newdataModel );
studyGrid.pqGrid( "refreshDataAndView" );
-
So without the quotes - this error get thrown: Uncaught ReferenceError: newdataModel is not defined - Here the whole thread:
Uncaught ReferenceError: newdataModel is not defined StudyGrid.js:204
StudyGrid.loadData StudyGrid.js:204
$.selectable.selected index.html:173
$.Widget._trigger jquery-ui-1.10.4.js:785
(anonymous function) jquery-ui-1.10.4.js:11356
jQuery.extend.each jquery-1.10.2.js:657
jQuery.fn.jQuery.each jquery-1.10.2.js:266
$.widget._mouseStop jquery-ui-1.10.4.js:11350
(anonymous function) jquery-ui-1.10.4.js:401
$.widget._mouseUp jquery-ui-1.10.4.js:957
(anonymous function) jquery-ui-1.10.4.js:401
_mouseUpDelegate jquery-ui-1.10.4.js:913
jQuery.event.dispatch jquery-1.10.2.js:5095
elemData.handle jquery-1.10.2.js:4766
-
sudo
looks like you haven't followed the instructions precisely.
Please check the newdataModel highlighted in bold in previous post, they should match.