Question

I have a problem where I need to display json data on a jqgrid. The data I get is of the following format:

{"data":{"data":"\tat org.aaa.aaa.aaa.aaa.aaa.aaa(aaa.java:512)[147:org.aaa.aaa.aaa:9.1.1]\n\tat aaa.aaa.aaa.aaa.aaa.aaa(aaa.java:1789)[146:org.aaa:9.1.1]\n"}}

My javascript to display the data is:

 $("#grid").jqGrid({
  url: '/getdata',
      datatype: "json",
  mtype: "GET",
  colNames:['data'],
  colModel:[
     {name:'data', index:'data', align:'center'}
  ],
   jsonReader : {
          repeatitems: false,
      id: "0",
      cell: "",
       root: "logs",
      page: function() { return 1; },
      total: function() { return 1; },
      records: function(obj) { return obj.length; }
    },
   loadonce: true,      
   viewrecords: true,
   autowidth: true,
   multiselect: false,
   ignoreCase: true,
   sortable: true,
   height: 600, 
   rowNum: 999
 });

I tried a few combinations, but could not get the data to be displayed on the jqgrid with this code. The jqgrid displays an empty table. I guess I am missing something here.

I also have to format the data so that every time we hit ‘\n’, we display it in a new row. I guess I can use ‘addrowdata’ in the formatter for the column to do that. Is that right?

Any pointers are greatly appreciated.

thanks,

Asha

Answer 1

I don’t recommend you to use addRowData. It’s more effectively to use beforeProcessing to modify the data returned from the server to the format which jqGrid can read. You can for example to split the data.data part by \n and fill the array of the corresponding items:

autoencode: true,
beforeProcessing: function (data) {
    var items = data.data.data.split("\n"), i, l, item;
    data.logs = [];
    for (i = 0, l = items.length; i < l; i++) {
        item = $.trim(items[i]);
        if (item.length > 0) {
            data.logs.push([item]);
        }
    }
}

I included the call of jQuery.trim in the above code to remove unneeded \t or other white space characters at the beginning or at the end of every line.

I included additionally autoencode: true option which is strict recommended to be sure that the texts which included special characters for HTML (like <, >, & and so on) will be correctly displayed inside of the grid.

Additionally you should change jsonReader to for example the following

jsonReader: {
    root: "logs",
    cell: "",
    id: function () {
        return function () {
            return $.jgrid.randId();
        }
    },
    page: function() { return 1; },
    total: function() { return 1; },
    records: function(obj) { return obj.logs.length; }
}

The value of id seems tricky, but the implementation generate really unique values for id attribute of every line.

The corresponding demo you will find here.