ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: dataSQL_ on January 18, 2017, 08:28:15 pm

Title: Create First ParamQuery Grid
Post by: dataSQL_ on January 18, 2017, 08:28:15 pm: Hello,

I have a vanilla COPIED exactly as presented, but the VIEW does not show. Please any hints as to why it is not showing, is greatly appreciated.
https://www.useloom.com/share/31125b80dd8e11e693861130904c47e0 (https://www.useloom.com/share/31125b80dd8e11e693861130904c47e0)

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Main View</title>


<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>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />


<link rel="stylesheet" href="css/pqgrid.min.css" />


<link rel="stylesheet" href="css/pqgrid.bootstrap.min.css" />


<script type="text/javascript" src="js/pqgrid.min.js" ></script>


<script type="text/javascript" src="js/touch-punch.min.js" ></script>

<script>
$(function(){

//JSON data (array of objects) can be defined locally
//or might be a response from an AJAX call from web server/service.
var data = [
{ rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
{ rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
{ rank: 3, company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
{ rank: 4, company: 'BP', revenues: 267600.0, profits: 22341.0 },
{ rank: 5, company: 'General Motors', revenues: 192604.0, profits: -10567.0 },
{ rank: 6, company: 'Chevron', revenues: 189481.0, profits: 14099.0 },
{ rank: 7, company: 'DaimlerChrysler', revenues: 186106.3, profits: 3536.3 },
{ rank: 8, company: 'Toyota Motor', revenues: 185805.0, profits: 12119.6 },
{ rank: 9, company: 'Ford Motor', revenues: 177210.0, profits: 2024.0 },
{ rank: 10, company: 'ConocoPhillips', revenues: 166683.0, profits: 13529.0 },
{ rank: 11, company: 'General Electric', revenues: 157153.0, profits: 16353.0 },
{ rank: 12, company: 'Total', revenues: 152360.7, profits: 15250.0 },
{ rank: 13, company: 'ING Group', revenues: 138235.3, profits: 8958.9 },
{ rank: 14, company: 'Citigroup', revenues: 131045.0, profits: 24589.0 },
{ rank: 15, company: 'AXA', revenues: 129839.2, profits: 5186.5 },
{ rank: 16, company: 'Allianz', revenues: 121406.0, profits: 5442.4 },
{ rank: 17, company: 'Volkswagen', revenues: 118376.6, profits: 1391.7 },
{ rank: 18, company: 'Fortis', revenues: 112351.4, profits: 4896.3 },
{ rank: 19, company: 'Crédit Agricole', revenues: 110764.6, profits: 7434.3 },
{ rank: 20, company: 'American Intl. Group', revenues: 108905.0, profits: 10477.0 }
];

//array of columns.
var colModel = [
{
title: "Rank", //title of column.
width: 100, //initial width of column
dataType: "integer", //data type of column
dataIndx: "rank" //should match one of the keys in row data.
},
{
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"
}
];

//main object to be passed to pqGrid constructor.
var obj = {
width: 700, //width of grid
height: 400, //height of grid
colModel: colModel,
dataModel: {data: data}
};

$("#grid_json").pqGrid( obj );

//or

pq.grid("#grid_json", obj ); //since version 3.2.0
});
</script>

</head>
<body>
<div id="grid_json"></div>
</body>
</html>
Title: Re: Create First ParamQuery Grid
Post by: paramvir on January 18, 2017, 09:44:04 pm: Please don't copy the code verbatim without understanding it and reading the docs/comments.

Please learn to debug your code when something doesn't work as expected, for this check and get yourself familiar with browser developer tools of Chrome/ Firefox browsers. At least learn to check the browser console for errors.

From the video you have shared, it's apparent that paths are incorrect, e.g., your css files reside in resources/css folder but not in css folder. Similar is the case of js files.

1. So correct the paths.

2. Use either $("#grid_json").pqGrid( obj );

//or

pq.grid("#grid_json", obj ); //since version 3.2.0

but not both.
Title: Re: Create First ParamQuery Grid
Post by: dataSQL_ on January 19, 2017, 05:17:46 am: Thank you, shall learn full process of debugging javascript.
Title: Excellent ! Re: Create First ParamQuery Grid
Post by: dataSQL_ on January 19, 2017, 02:41:00 pm: Why does the CSS look this way? and does not function properly?

http://35.167.46.75

Mr. Dhindsa, sir. It is not my intention to disturb you with basic questions, please I have viewed:

"Please check out the Tutorial to get started, API for a comprehensive list of options, methods, and events. Also, check Demos section for examples and sample source code."

Are there additional instructional guides to ParamQuery Pro, it is my hope to become proficient at using all the features of your wonder jQuery component.
Title: Re: Create First ParamQuery Grid
Post by: paramvir on January 19, 2017, 09:00:34 pm: You have included the files as per the instructions for v3.2.0 of pqGrid with bootstrap theme.

Please include the files according to the instructions for jQueryUI theme.

http://paramquery.com/pro/tutorial#topic-include
Title: Re: Create First ParamQuery Grid
Post by: dataSQL_ on January 19, 2017, 09:35:23 pm: Excellent, thank you.

Do you have an example for displaying images in cells, such as product images?