JQGRID Saving a new row

Question

I have used jqgrid several times before and without too many problems, except this time I've hit a brick wall.

I'm building a website which requires the user to have access to a products database table via a manager front end, which is where JQGRID comes in. There are a number of columns to this table, such that having a modal box pop up for adding a new row isn't practical (modal box is taller than the window).

Therefore I am using the inline approach to editing, adding and deleting rows, which works well except when it comes to save a new record. Clicking the add row button, creates a new row at the top of the table, to which I can populate at will, however when I click on save row, nothing happens!

If I highlight a row and edit something then click on save row, it fires off the required ajax call to the server side script with all of the parameters and the row is amended. Hence I know that the button does work as opposed to it simply not being enabled or something. Highlighting a row and clicking on delete works as well.

What confuses me, is that clicking on save row when adding a new row does nothing, (well it doesn't try and fire off an ajax request - monitored using Firebug), neither do I get any sort of error. I'm using the latest version of JQGRID

Here's my code.

        <div style='overflow: auto;'>
                <table id='list3'></table>
                <div id='pager3'></div>
        </div>


        <script>

                jQuery('#list3').jqGrid({
                        url:'/accent/index.php?id=39',
                        datatype: 'json',
                        colNames:['ID','Brand', 'Item Code', 'S. Desc','L. Desc','Range',
                                'Colour/Finish','Category','Fitment','No of Bulbs','Type of Lamp','Light Socket','Max W',
                                'Max LE Lamp','IP','Width','Length','Height','Min Drop','Max Drop',
                                'Projection','Weight','Shade Code','RRP','Price','Clearance','Featured'
                                ],
                        colModel:[
                                {name:'id',index:'id', width:40,align:'center',editable:true},
                                {name:'brand',index:'brand', width:70,align:'center',editable:true},
                                {name:'itemCode',index:'itemCode', width:75,align:'center',editable:true},
                                {name:'shortDesc',index:'shortDesc', width:100,editable:true},
                                {name:'longDesc',index:'longDesc', width:200,editable:true},
                                {name:'range',index:'range', width:100,align:'center',editable:true},
                                {name:'colourFinish1',index:'colourFinish1',width:100,align:'center',editable:true},
                                {name:'groupOfLights',index:'groupOfLights',width:100,align:'center',editable:true},
                                {name:'typeOfFitting',index:'typeOfFitting',width:100,align:'center',editable:true},
                                {name:'noOfLamp1',index:'noOfLamp1',width:80,align:'center',editable:true},
                                {name:'typeOfLamp1',index:'typeOfLamp1',width:80,align:'center',editable:true},
                                {name:'lightSocketLamp1',index:'lightSocketLamp1',width:50,align:'center',editable:true},
                                {name:'maxWattageLamp1',index:'maxWattagelamp1',width:50,align:'center',editable:true},
                                {name:'maxLowEnergyLamp',index:'maxLowEnergyLamp',width:50,align:'center',editable:true},
                                {name:'ipRating',index:'ipRating',width:50,align:'center',editable:true},
                                {name:'width',index:'width',width:50,align:'right',editable:true},
                                {name:'length',index:'length',width:50,align:'right',editable:true},
                                {name:'height',index:'height',width:50,align:'right',editable:true},
                                {name:'minimumDrop',index:'minimumDrop',width:60,align:'right',editable:true},
                                {name:'maximumDrop',index:'maximumDrop',width:60,align:'right',editable:true},
                                {name:'projection',index:'projection',width:100,align:'right',editable:true},
                                {name:'weight',index:'weight',width:50,align:'right',editable:true},
                                {name:'shadeCode1',index:'shadeCode1',width:50,align:'right',editable:true},
                                {name:'rrp',index:'rrp',width:50,align:'right',editable:true},
                                {name:'price',index:'price',width:50,align:'right',editable:true},
                                {name:'clearance',index:'clearance',width:50,align:'center',editable:true},
                                {name:'featured',index:'featured',width:50,align:'center',editable:true}
                        ],
                        rowNum:25,
                        rowList:[25,50,100],
                        pager: '#pager3',
                        sortname: 'id',
                        viewrecords: true,
                        sortorder: 'desc',
                        caption:'Edit Products',
                        height: '500px',
                        editurl:'/accent/core/components/productsdatabase/editJSON.php?&u=admin
                });

                jQuery('#list3').jqGrid('navGrid','#pager3',{edit:false,add:false,del:true});
                jQuery('#list3').jqGrid('inlineNav','#pager3',{edit:true,add:true,del:false});
        </script>

Answer 1

The problem has now been identified and as a known bug with the inline editing functionality of jqgrid.

For all details please see this Stackoverflow post : StackOverflow