JqGrid Traversing Through Row Data and Cell Data

Question

I am planning generate custom XML of the entire grid data for which i need to traverse through each row , and each cell of the grid.

It is easy to traverse through rows as follow. The only problem i am facing is traversing through the cells as getRowData returns key value pair instead of an array.

var ids = jQuery("#jgrid").jqGrid('getDataIDs');
//traverse the rows
for (var i = 0; i < ids.length; i++) {
    var rowdata = $("#jgrid").getRowData(ids[i]);
    var res = "";
    // Traverse the cells which does not work
    for (var j = 0; j < rowdata.length; j++) {
        ...
        ....logic to generate Xml element for each cell
    }
}

I dont want to hardcode column names as i plan to use it for all the grids. So the solution has to be Generic.

Any ideas ? Thanks in Advance.

score 6 · Accepted Answer · edited May 23 '17 at 12:33

One of the simplest way to enumerate all data in the grid you can implement using rows and cells. It's important to understand, that jqGrid use HTML <table> for represent the data of the grid and <tr> represent the rows. jQuery objects are wrapper on DOM elements. For example jQuery("#jgrid")[0] is the DOM element which implements HTMLTableElement. DOM is supported by really all web browsers, so you can safe use it. Internally jqGrid uses HTMLTableElement, HTMLTableRowElement and HTMLTableCellElement really permanently. If you examine the source code of getDataIDs and getRowData which you use in your current code you will see that jqGrid uses rows DOM property of the <table> intensively.

In the asnwer and in another one you will find an example of the code which enumerate the grid data.

In general the enumeration consists from

var $grid = jQuery("#jgrid"), rows = $grid[0].rows, cRows = rows.length,
    iRow, rowId, row, cellsOfRow;

for (iRow = 0; iRow < cRows; iRow++) {
    row = rows[iRow];
    if ($(row).hasClass("jqgrow")) {
        cellsOfRow = row.cells;
        // row represent the row with cellsOfRow.length cells.
        // So one can use for loop with iCol between 0 and cellsOfRow.length
        // cellsOfRow[iCol] represent the cell with the index iCol
        // and $(cellsOfRow[iCol]).text() - the text of the cell
    }
}

JqGrid Traversing Through Row Data and Cell Data

1 Answers1