How to define JSON data local in Hierarchy Row detail?

[aniket.kulkarni]

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,

Code: [Select]

$(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.

[pankaj.mahajan]

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

[paramvir]

There is an issue with using local data in master grid. Currently location == "remote" is the only workable option for master grid.

[aniket.kulkarni]

Thanks.

[Calmitude]

For those unable to use location "remote" (I'm using MongoDB behind Meteor), is there any way we can still use nested grids?

[paramvir]

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.

[Calmitude]

The bug mentioned in this thread seemed to be the only explanation for the following behaviour:

Code: [Select]

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:

Code: [Select]

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.

[paramvir]

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.

[Calmitude]

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:

Code: [Select]

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!