jQuery Grid Plugin - jqGrid

Okay, we've come across a solution.

The problem is when the editable field of the column is set to true, the *value* of the cell changes to html, because it's now editable.

ie wheras before you might have had column "Age":"16",

when it is being edited, the value "16" changes to <input type="textbox" id="bla" etc>, and this is what is pulled out by getRowData(...).

if you're not sure what i mean, switch the column property editable:true -> editable:false and then call getRowData(...) you'll see the actual value pop up.

this frustrated me for about 3 hours this afternoon, someone only just pointed out to me what was up 😀

from here i'm going to try to figure out how to use jquery/jqgrid to change the editable property of the field to false before i call getRowData

What we did is we took the editRow(...) call from the "onRowSelect" event. Instead we now have to click on a button to edit the row.

By taking the editRow out of the event and making it explicit that you have to click the button to edit the row, when you call getRowData(...) it will actually return the value of the field, rather than the html of the input box.

the idea is that when you call getRowData the field is in fact not editable. However you have edited it before so the edited data is there.

Here's the code we used:

colModel :[
          {width:45, name:'Act'        , index:'Act'            , editable:false},
          {name:'RecordID'            , index:'RecordID'            , editable:true, hidden:true},
          {name:'Date'                , index:'Date'                , editable:true, hidden:true},
          {name:'IP'                , index:'IP'                , editable:true, hidden:true},
          {name:'Student_First_Name', index:'Student_First_Name', editable:true},
          {name:'Student_Last_Name'    , index:'Student_Last_Name'    , editable:true},
          {name:'Class'                , index:'Class'                , editable:true, hidden:true},
          {width:250, name:'Teacher_Name'    , index:'Teacher_Name'        , editable:true},
          {width:580, name:'School_Name'    , index:'School_Name'        , editable:true},
          {name:'Location'            , index:'Location'            , editable:true},
          {name:'PG_First_Name'        , index:'PG_First_Name'        , editable:true},
          {width:200,name:'PG_Last_Name'        , index:'PG_Last_Name'        , editable:true},
          {width:380, name:'Email'                , index:'Email'                , editable:true},
          {name:'Relationship'        , index:'Relationship'        , editable:true, hidden:true},
          {name:'Phone'                , index:'Phone'                , editable:true} ],
        onSelectRow: function(id){
        if(id && id!==lastsel){
            $('#scrub').saveRow(lastsel);
            lastsel=id;
        }
        
       },

//this creates a button that we can click to make the row editable

gridComplete: function(){
            var ids = jQuery("#scrub").jqGrid('getDataIDs');
            for(var i=0;i < ids.length;i++){
                var cl = ids[i];
                be = "<input style='height:22px;width:13px;' type='button' value='E' onclick="jQuery('#scrub').editRow('"+cl+"', true);" />";
                $("#scrub").jqGrid('setRowData',ids[i],{Act:be});
            }
        },

then below we've defined a save button, which then calls getRowData, which is the value we need.

I have noticed that sometimes even when you call Getrowdata before and edit you still get the input tags....

If you do a getrowData and then do an editRow .. Sometimes the Edit row happens first