darksoulsong darksoulsong - 6 months ago 59
JSON Question

jqGrid - Setting database record nested property as row id

In my grid, I configured jsonReader "id" property to get my database record as row id.
Like this:

JSON:

{
id: 1,
price: 99.99,
data: {
dataId: 2
}
}


JSON READER

...
jsonReader: {
root: 'list',
total: 'count',
id: 'id'
},
...


What if I want to set "dataId" as the row id? I tried to define it by using dot notation in a string, but it doesn't work. Here's my grid options:

var gridOptions = {
height: 250,
colNames: ['Nome', 'Pre├žo'],
colModel: [{
name:'ipvodAsset.title',
index:'ipvodAsset.title',
width: 200,
sorttype:'string',
searchoptions: { sopt:['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc'] }
}, {
name:'price',
index:'price',
width:200,
sorttype:'currency',
formatter: 'currency',
searchoptions: { sopt:['eq','ne','gt','ge','bw','bn','cn','nc'] }
}],
jsonReader: { id: 'data.data.id' },
prmNames: {'order': 'order'},
gridView: true,
sortorder: 'asc',
sortname: 'title',
viewrecords : true,
rowNum: 10,
rowList:[10,20,30],
altRows: true,
dataType="local",
data = [
{ "id": 1, "price": 99.99, "data": { "dataId": 2 } },
{ "id": 2, "price": 99.99, "data": { "dataId": 3 } },
{ "id": 3, "price": 99.99, "data": { "dataId": 4 } },
{ "id": 4, "price": 99.99, "data": { "dataId": 5 } }
]
};

Answer

First of all I should mention that there exist large difference between JSON and object initialization. The syntax

var data = [
    { "id": 1, "price": 99.99, "data": { "dataId": 2 } },
    { "id": 2, "price": 99.99, "data": { "dataId": 3 } },
    { "id": 3, "price": 99.99, "data": { "dataId": 4 } },
    { "id": 4, "price": 99.99, "data": { "dataId": 5 } }
];

declare variable data and initialize it. The variable data have the type object. Because the names of all properties id, price and data contains no spaces, dots and other special characters one can rewrite the above code like

var data = [
    { id: 1, price: 99.99, data: { dataId: 2 } },
    { id: 2, price: 99.99, data: { dataId: 3 } },
    { id: 3, price: 99.99, data: { dataId: 4 } },
    { id: 4, price: 99.99, data: { dataId: 5 } }
];

Another construction

var myJsonString = '[ { "id": 1, "price": 99.99, "data": { "dataId": 2 } }, { "id": 2, "price": 99.99, "data": { "dataId": 3 } }, { "id": 3, "price": 99.99, "data": { "dataId": 4 } }, { "id": 4, "price": 99.99, "data": { "dataId": 5 } } ]';

declare and initialize the variable myJsonString of the type string (!!!). One can easy convert the string myJsonString to object data using jQuery.parseJSON or JSON.parse or even using eval function of JavaScript.

So the string used on the right side of myJsonString initialization is JSON string, but not the initializer from the first example.

The code which you posted like dataType="local" instead of datatype: "local" or gridView: true instead of gridview: true. If you use dataType: "local" for example instead of datatype: "local" then the option will be ignored and the default "xml" value of datatype will be used. It will not what you need.

Nevertheless the question stay: ho to read such data and assign rowid values from data.dataId.

Because you use datatype: "local" one need use localReader instead of jsonReader:

localReader: { id: "data.dataId" }

instead of

jsonReader: { id: 'data.data.id' }

used in your code.

The corresponding demo is here. It displays

enter image description here

You can easy verify (using Developer Tools of Chrome, Internet Explorer or Firefox) that the rowids of the grid are 2,3,4,5 and not 1,2,3,4:

enter image description here