CODEWITHSUNDEEP
jqueryajaxjqgrid
aikeru
aikeru

Reputation: 3983

jqGrid - cells with TD elements inside

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.

Upvotes: 0

Views: 1665

Answers (2)

user3770241
user3770241

Reputation: 11

There is one more option that I implemented. Instead of, manipulating the jqGrid core javascript, why not use th tags instead of td tags in the Cell that you are creating a Table.

I had a similar requirement and did go ahead with the above implementation (jqgrid.min.js manipulation). But then what happens is there is a mismatch with the Column# and the Cell# that we are trying to fetch. For example, I had to set a cell dynamically, Though the column-id was correct, it was editing/ changing a different cell (as there were extra td tags in one of the Cells).

I went ahead and used th instead of td tags for the custom table that I am creating within a Cell. Works so far.

Upvotes: 0

r.piesnikowski
r.piesnikowski

Reputation: 2951

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.

Upvotes: 1

Related Questions