jQuery Grid Plugin - jqGrid - Topic: Adding Row Dynamically http://www.trirand.com/blog/?page_id=393/bugs/adding-row-dynamically Simple:Press Version 5.7.5.3 neolivz on Adding Row Dynamically http://www.trirand.com/blog/?page_id=393/bugs/adding-row-dynamically#p13454 Bugs http://www.trirand.com/blog/?page_id=393/bugs/adding-row-dynamically#p13454 I fixed the problem by adding

width:100%;

atribute.

]]> Wed, 30 Dec 2009 11:51:51 +0200 neolivz on Adding Row Dynamically http://www.trirand.com/blog/?page_id=393/bugs/adding-row-dynamically#p13443 Bugs http://www.trirand.com/blog/?page_id=393/bugs/adding-row-dynamically#p13443 Sorry, this was a mistake.

padding-left:40%;

was making the problem

]]> Wed, 30 Dec 2009 09:13:45 +0200 neolivz on Adding Row Dynamically http://www.trirand.com/blog/?page_id=393/bugs/adding-row-dynamically#p13442 Bugs http://www.trirand.com/blog/?page_id=393/bugs/adding-row-dynamically#p13442 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.

<html>
    <head>
        <title>Dojo Test Page</title>
       

        <link rel="stylesheet" type="text/css" media="screen" href="css/theme/official/common.css"/>
        <link rel="stylesheet" type="text/css" media="screen"
              href="scripts/vendor/jquery-ui/css/cupertino/jquery-ui-1.7.2.custom.css"/>
        <link rel="stylesheet" type="text/css" media="screen" href="scripts/vendor/jquery-ui/jqGrid/css/ui.jqgrid.css"/>
       
    <link rel="stylesheet" type="text/css" media="screen" href="scripts/vendor/jqGrid/css/jquery-ui-1.7.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="scripts/vendor/jqGrid/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="scripts/vendor/jqGrid/css/jquery.searchFilter.css" />
<script src="scripts/vendor/jquery-ui/development-bundle/jquery-1.3.2.js" type="text/javascript"></script>
<script src="scripts/vendor/jquery-ui/development-bundle/ui/jquery-ui-1.7.2.custom.js" type="text/javascript"></script>
<script src="scripts/vendor/jquery-ui/jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="scripts/vendor/jquery-ui/jqGrid/src/grid.base.js" type="text/javascript"></script>
<script src="scripts/vendor/jquery-ui/jqGrid/src/grid.custom.js" type="text/javascript"></script>
<script type="text/javascript">
    var count = 0;
    var selectedNodes = new Array();
    var ret = {};
    var id=0;
    jQuery(document).ready(function() {
        jQuery("#myTable").jqGrid({
            datatype: 'local',
            mtype: 'GET',
            colNames:['A','B','C','D','E'],
            colModel:[
                {name:'a',label:'A', editable: false,search:true},
                {name:'b',label:'B', editable: false,search:true},
                {name:'c',label:'C',  align:"center", editable: false,search:true},
                {name:'d',label:'D',  editable: false,search:true},
                {name:'e',label:'E',  editable: true,search:true},
            ],
            height:'191px',
            imgpath: 'css/smoothness/images',
            sortname: 'a',
            sortorder: 'desc',
            enableSearch: true,
            autosearch:true,
            viewrecords: true,
            autowidth:true,
            scroll:false,
            caption: 'Test Page'
        });
        addRow();
        addRow();
        addRow();
    });

  

    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++;

    }
</script>

    <link rel="stylesheet" href="css/blueprint/grid.css" type="text/css" />
    <link rel="stylesheet" href="css/Simpl.css" type="text/css" />
    <link rel="stylesheet" href="css/twmsWidget/Search.css" type="text/css" />

    </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

]]> Wed, 30 Dec 2009 07:56:47 +0200