Question

I seem to have an issue where with jQuery Grid (jqGrid) if I have loaded data where one of the cells has a table inside, it throws an error when onSelectRow() is fired and I call $(grid).getRowData(rowid).

jqGrid seems to be enumerating ALL of the TD elements in the selected row (including those which are children of the table within a given cell).

Is there a proper way to do this or to prevent jqGrid from enumerating those elements? 🙁

EDIT: In my particular case, the HTML was hidden until needed, so I was able to replace the TD’s with “xtd” on the server until sent out to the client. On the client-side, when I needed them HTML, I just replace “xtd” to “td”. Still wish there was a better way.

EDIT: I want to clarify, I desire a method of doing this that doesn’t modify the plugin. An well-written modification would still be nice.

Answer 1

Old but yet not solved.

Hi. Yes jqGrid has problem with inner table and td but there is a quick and useful fix. In file jquery.jqGrid.min (jqGrid 3.8.2 – jQuery Grid). Put file into js-beutifier or get not minified version and find getRowData function. Then you have to add extra condition to lookup foreach b("td", r).each(function (t) { to code b("td[id!='-1']", r).each(function (t) {. In your inner table you should declare <td id="-1">. In this case you exclude your td from searching in colModel.

Copy/Paste this code:

getRowData: function (f) {
            var j = {},
                i, c = false,
                e, k = 0;
            this.each(function () {
                var n = this,
                    a, r;
                if (typeof f == "undefined") {
                    c = true;
                    i = [];
                    e = n.rows.length
                } else {
                    r = n.rows.namedItem(f);
                    if (!r) return j;
                    e = 2
                }
                for (; k < e;) {
                    if (c) r = n.rows[k];
                    if (b(r).hasClass("jqgrow")) {
                        b("td[id!='-1']", r).each(function (t) {//fix
                            a = n.p.colModel[t].name;
                            if (a !== "cb" && a !== "subgrid" && a !== "rn") if (n.p.treeGrid === true && a == n.p.ExpandColumn) j[a] = b.jgrid.htmlDecode(b("span:first", this).html());
                            else try {
                                j[a] = b.unformat(this, {
                                    rowId: r.id,
                                    colModel: n.p.colModel[t]
                                }, t)
                            } catch (B) {
                                j[a] = b.jgrid.htmlDecode(b(this).html())
                            }
                        });
                        if (c) {
                            i.push(j);
                            j = {}
                        }
                    }
                    k++
                }
            });
            return i ? i : j
        }

Finally where you want to put inner table do this:

<table>
    <tr>
        <td id="-1">
            Now It's working!
        </tr>
        <td id="-1">
            Yeah
        </tr>
    </tr>
</table>

Of course you can change id attribute but I recommend fix this with html id attribute due to jQuery performance against class attribute.