jQuery Grid Plugin - jqGridForum

Topic RSS

Adding Row Dynamically

30/12/2009
07:56

neolivz

Bangalore

Member

Members

Forum Posts: 6

Member Since:
30/09/2009

Offline

Hi,

I am dynamically adding rows to the grid using addData method. My requirement needs to add a checkbox in the row.

function addRow() {
                var checkBox = "<div style=\\"alignl:center;padding-left:40%;\\"><input type=\\"checkbox\\" name = \\"name[" + count + "].id\\" value=\\"true\\" /></div>";
                var value = "<input type=\\"hidden\\" name = \\"name[" + count + "].value\\" value=\\"" + id + "\\"/>"
                ret['e'] = checkBox + value;
                ret['a']='a';
                ret['b']='b';
                ret['c']='c';
                ret['d']='d';
                selectedNodes.push(id);
                jQuery("#myTable").addRowData(count, ret);
                count++;

}

I call this method multiple times. It works fine in firefox. But in IE it adds checkbox only in first row.

I have checked the source code of grid.base.js

addRowData : function(rowid,data,pos,src) {

method there is a part

if(t.rows.length === 0){
                    $("table:first",t.grid.bDiv).append(row);
                } else {
                switch (pos) {
                    case 'last':
                        $(t.rows[t.rows.length-1]).after(row);
                        break;
                    case 'first':
                        $(t.rows[0]).before(row);
                        break;
                    case 'after':
                        sind = t.rows.namedItem(src);
                        sind != null ? $(t.rows[sind.rowIndex+1]).hasClass("ui-subgrid") ? $(t.rows[sind.rowIndex+1]).after(row) : $(sind).after(row) : "";
                        break;
                    case 'before':
                        sind = t.rows.namedItem(src);
                        if(sind != null) {$(sind).before(row); sind=sind.rowIndex;};
                        break;
                }

the

$("table:first",t.grid.bDiv).append(row);

works fine but

$(t.rows[t.rows.length-1]).after(row);

does not work fine in IE.

I do not know its know its a bug or not, but it behaves diffrent in diffrent browser.

Here is the complete source code.

}
</script>

</head>
<body>
<div style="padding-top:5px;">
<table id="myTable" style="width:96%" class="scroll"></table>
</div>
</body>

</html>

I was able to work around using custom formatter

function checkboxFormatter(el, cval, opts) {

        return '<input type="checkbox" />';
      }

It works fine in both ie and firefox 🙂

Regards,

Jishnu

30/12/2009
09:13

neolivz

Bangalore

Member

Members

Forum Posts: 6

Member Since:
30/09/2009

Offline

Sorry, this was a mistake.

padding-left:40%;

was making the problem

30/12/2009
11:51

neolivz

Bangalore

Member

Members

Forum Posts: 6

Member Since:
30/09/2009

Offline

I fixed the problem by adding

width:100%;

atribute.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
83 Guest(s)

Currently Browsing this Page:
1 Guest(s)