ParamQuery grid support forum
General Category => ParamQuery Pro Evaluation Support => Topic started by: aniket.kulkarni on May 21, 2014, 06:23:58 pm
-
I can able to show grid data when using dataModel option location: "remote".
Now, I want to make data available locally. That means location: "local".
I made changes accordingly, but not able to show grid.
Here is code,
$(function () {
var colM = [
{ title: "", minWidth: 27, width: 27, type: "detail", resizable: false, editable: false },
{ title: "ShipCountry", width: 100, dataIndx: "ShipCountry" },
{ title: "Customer Name", width: 120, dataIndx: "ContactName" }
];
var data = [
{ ShipCountry: "India", ContactName: "Dheeraj"},
{ ShipCountry: "France", ContactName: "Fred"}
];
var dataModel = {
data: data,
location: "local",
sorting: "local",
dataType: "JSON",
recIndx: "ShipCountry",
rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000]
};
var $gridMain = $("#grid_md").pqGrid({
width: 860, height: 500,
dataModel: dataModel,
editable: false,
colModel: colM,
wrap: false,
hwrap: false,
numberCell: { show: false },
title: "<b>Shipping Orders</b>",
resizable: true,
freezeCols: 1,
freezeRows: 0,
selectionModel: { type: 'cell' },
detailModel: {
cache: true,
collapseIcon: "ui-icon-plus",
expandIcon: "ui-icon-minus",
init: function (ui) {
//var rowData = ui.rowData;
//orderID = rowData["OrderID"];
//make a deep copy of gridDetailModel
var objCopy = $.extend(true, {}, gridDetailModel);
var $grid = $("<div/>").pqGrid(objCopy);
$grid.on("pqgridcellclick", function (event, ui) {
alert("Inside cell click");
});
alert("3A");
$grid.on("pqgridquiteditmode", function (evt, ui) {
//exclude esc and tab
if (evt.keyCode != 27 && evt.keyCode != 9) {
}
});
$grid.on("pqgridcellsave", function (evt, ui) {
alert("Inside cell save");
alert(JSON.stringify(ui));
});
return $grid;
}
}
});
//This is just to show child grid data
var childData = [{Name:"Ram",Addr:"India"}];
//details grid
var gridDetailModel = {
height: 130,
pageModel: { type: "local", rPP: 5, strRpp: "" },
dataModel: {
data:childData,
location: "local",
sorting: "local",
dataType: "JSON",
sortIndx: "Name"
},
colModel: [
{ title: "Name", width: 80, dataIndx: "Name" },
{ title: "Address", width: 80, dataType: "integer", dataIndx: "Addr" }
],
editable: true,
groupModel: {
dataIndx: ["Name"],
dir: ["up"],
title: ["{0} - {1} product(s)"],
icon: [["ui-icon-triangle-1-se", "ui-icon-triangle-1-e"]]
},
freezeCols: 0,
flexHeight: true,
flexWidth: true,
numberCell: { show: false },
title: "Name Details",
showTop: false,
showBottom: false
};
});
I just want to use local data instead of remote.
I have been trying since last 2-3 hours.
Please help me.
-
I want to use nested grid of paramquery pro version with data to be fetched is on same page i.e. location="local".
I have tried the example given in demo but the grid dosen't get populated when I change location="remote" to location="local", I am also assigning the dataModel.data manually but still its not working.
Please HELP...
-
There is an issue with using local data in master grid. Currently location == "remote" is the only workable option for master grid.
-
Thanks.
-
For those unable to use location "remote" (I'm using MongoDB behind Meteor), is there any way we can still use nested grids?
-
Nested grids can be used with both local and remote location in version 2.1.0
Any specific reason why you can't use "remote" with Meteor.
-
The bug mentioned in this thread seemed to be the only explanation for the following behaviour:
var columns = [{title:"id", dataIndx:"_id", dataType: "integer", editable:false, hidden:true}]
columns.push({title: "", minWidth: 27, maxWidth: 27, type: "detail", editable: false})
//columns.push rest of columns
var tableData = {
title:"Test",
colModel:columns,
dataModel:{},
detailModel = {}
}
$(#grid).pqGrid(tableData)
The above works fine and if I define detailModel correctly then the nested grid works as expected.
If dataModel.data is set to something else like [{"_id":"1"}] and I comment out the line pushing the type: "detail" column, the above still works correctly.
However with the above code and tableData.dataModel.data = [{"_id":"1"}] for example, I get the following error:
Uncaught TypeError: Cannot read property 'children' of null in:
m.detachInitView = function (b, a) {
var d = this.that,
c = d.data;
if(c && c.length) {
for(var d = d.$tbl.children("tbody").children("tr.pq-grid-row")
where d.$tbl is null
Any ideas why?
As to Meteor, the server-side code publishes a subset of the data that is accessible by the client, so I don't want the client accessing the database directly.
-
1) dataModel.location = 'local' works fine with master/ detail grid in 2.1.0.
I've put up a demo for your reference here:
http://paramquery.com/pro/demos/nesting_local
If you still get an error please post a small test case with reproducible error..
2) location = 'remote' doesn't access the database directly but access it through REST end points which provides the necessary flexibility to select the required data.
-
Thank you for your demo, I've gotten it working.
I believe the error could be a paramquery bug, since the solution involved populating the data only once the grid had been made through:
grid.pqGrid("option", "dataModel.data", @tableContent)
grid.pqGrid("refreshDataAndView")
On all other tables, dataModel.data could be set directly in the object used to make the grid.
Lastly a big thanks for paramquery, it's incredibly flexible to work with!