JqGrid: How get all the json data, not just those who belongs to a column?

Question

I have a jqGrid that is calling a url to fill the data. I am using json as datatype. I need some information for each row that I dont want to show in the grid. So I am bringin a json with more properties than columns. But when I do:

jQuery("#gridId").getRowData("2");

I just can see the data that is asociated with a column. How can I have and query data in json that I dont want to show in the grid.

For example I have in the JSON

{
   Id: 2,
   Name: Pepe,
   Profession: Doctor
}

And I just want to see two columns in the grid, Id and Name, but I want to know the profesion in client side by each row.

Answer 1

The solution would depend on the total number of rows which you need to display. If the number of rows is not large (for example less as 1000 or less as 10000) then the best choice would be return all the data from the server at once. You should add loadonce: true option to inform jqGrid to read all the data and to save it in the internal data and _index parameters. The next important step would be setting the page size not so large, for example 10, 20 or 25. jqGrid will display the first page of data after loading all data from the server. By default jqGrid require that the server return sorted data corresponds to sortname and sortorder parameters, which will be send to the server as sidx and sortd. On the other side one can use additional option forceClientSorting: true to force free jqGrid to sort and filter the data before the first page will be displayed.

If one chosen the described above scenario then one can use additionalProperties option to save additional information for every row of data returned from the server. If you want for example to save the value of Profession property existing in every item of data then you can use additionalProperties: ["Profession"] option. After that you can access the data by id using getLocalRow. The method getLocalRow works much quickly as getRowData because it returns just the reference to internal row object, which was read from the server response. It contains all name properties from colModel and the properties from additionalProperties.

The demo https://jsfiddle.net/OlegKi/g8ffxpv2/2/ demonstrates the approach.

You asked additionally how to set title on some rows based on the content. I'd recommend you to use rowattr to set any attribute of the row (title, class, style and so on) see the answer or to use cellattr (see the answer or this one).

Only if one loads really large data and one can't use loadonce: true option than one can define dummy hidden columns, like {name: "Profession", hidden: true} instead of usage additionalProperties. The way is less effective, but it will work. By the way the value of properties used in additionalProperties could have any type. For example one can include in every item of the main data array of subgrid data in the property (details, subgrid). Hidden columns don't allows to load complex data, because the data hate to be not only leaded, but the saved as string in the hidden column (in <td> elements of the column).

Answer 2

If you are using Oleg's free-jqgrid and the version is the latest then you would do this:

var theGrid = $("#grid");
var myData = [
{
   "Id": 1,
   "Name": "John",
   "Profession": "Doctor"
},
{
   "Id": 2,
   "Name": "Pepe",
   "Profession": "Doctor"
},
{
   "Id": 2,
   "Name": "Jane",
   "Profession": "Nurse"
}
];


theGrid.jqGrid({
    data : myData,
    colNames: ['Id', 'Name'],
    colModel: [
       {name: 'Id'},
       {name: 'Name'}
       ]
});

var allData = theGrid.jqGrid("getGridParam").data;
console.log(JSON.stringify(allData));

//show Pepe's Profession:
$.each(allData, function(i, v){
    if(v.Name === "Pepe")
    alert(v.Profession);
});

If you are not using Oleg's free-jqgrid I highly recommend you do as you will be much happier in the end and he gives really good support. However if you are not using his grid and you are using version 4.6 of jqgrid you can still use the var allData = theGrid.jqGrid("getGridParam").data; to get all data from grid regardless of what columns you are showing.

Example using free-jqgrid 4.13.1: FIDDLE

Example using jqgrid 4.6: FIDDLE

Added from Oleg's comment: DEMO for json datatype