Question

So, I’ve got an implement of jqGrid which is working great. I’m displaying some rows of data and when new data is added — the grid refreshes as appropriate.

However, if I try and drop a row from the grid — it doesn’t cleanup the missing rows! Adding new rows is fine, but deleting leaves data and bugs out the grid’s display.

If I call ‘clearGridData’ first, I see the data cleaned up as appropriate. However, if I call clearGridData — I lose my selection/page!

http://jsfiddle.net/yNw3C/1766/

var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date"},
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Stack Overflow Example"
});

var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

$('#UpdateGridButton').click(function(){
    mydata[0].status = "CLOSED";
    delete mydata[1];

    //If I add this -- I can refresh grid data properly, but I lose my selection.
    //$('#grid').clearGridData();

    $("#grid").jqGrid('setGridParam', { data: mydata});

    $("#grid").trigger('reloadGrid', [{current: true}]);
});

​
Is the best of both worlds supported implicitly by jqGrid? Or do I need to write custom logic?

Answer 1

Sorry, but you use jqGrid in wrong way currently.

First of all the filling of the grid is very important. You use currently addRowData. It’s the oldest, but the slowest way to fill the grid which I know. If you use datatype: "local" you should use data: mydata which allows to create directly jqGrid with the data.

Other very important options are gridview and rowNum. You should always use gridview: true to improve performance of grid (see the answer for more details). To understand the value of rowNum you should know that jqGrid is designed to support paging of data. In case of datatype: "local" sorting and paging will be implemented locally by jqGrid itself. The pager for navigation through pages will be created either by usage of toppager: true option or by usage pager: "#pagerId". Even if you don’t create any pager local paging is still activated. Default value of rowNum is 20. So your current grid will display just the first 20 rows. the only exception if addRowData which force adding the row on the current page temporary. After reloading (for example indirectly by changing the sorting) only the first 20 rows will be shown for the user and the user will have no GUI to change the page (!!!???). If you want to display all rows on one page you should use rowNum: 10000 for example.

The next important parameter is autoencode: true which mean that the data for the cells should be interpreted as text and not as HTML fragment. If you don’t use autoencode: true you will be unable to display the text which contain '<', '>', '&' and so on.

I recommend you additionally to use height: "auto" if you use local paging of data. It will remove empty space on the right size of the grid reserved for the scrollbar. You can use alternatively scrollOffset: 0 to remove the unneeded space.

The next important error in your code is the usage of setGridParam with data parameter. You cab do this only if the grid was empty before or if you need to add some additional rows. The setGridParam exist mostly for other purpose. It uses internally $.extend (see the code here). So you will extend the old contain of data with new values instead of replacing old data to new one. What you can do is for example to use getGridParam to get the reference to internal data parameter:

var data = $("#grid").jqGrid("getGridParam", "data");

Then you can modify array data using push, pop and delete. To full replace the data you can do

var allParameters = $("#grid").jqGrid("getGridParam");
allParameters.data = newData; // or newData.slice(0)

After that you can reload the grid by triggering of "reloadGrid".