Retrieve value of cells, when in edit mode in JqGrid

Question

Iam using JqGrid to for data entry.

Iam showing an empty jqgrid at page load and on click of a button, add an empty row from client-side only.

On click of the empty row, it becomes editable and the new values can be added.

Any number of rows can be added and edited and all rows are in edit mode.

Now I need to get all this data and send it at once to the action in my controller.

JqGrid provides methods to retrieve row or cell data when not in edit mode.

But while in edit mode, there's no way given.

I have done the following which works for me but am not sure as to if this is the right way to do it.

$("#btnSave").click(function () {

        var rows = new Array();

        //rows[0] = new Array();
        //Gets total count of records shown currently
        var totalrec = jQuery("#rowed2").jqGrid('getGridParam', 'reccount');

        //total number of columns, 
        //can also use"jQuery("#rowed2").jqGrid('getGridParam', 'colModel').length"
        var totalCol = 4;

        var totalCells = 0;

        for (var i = 0; i < totalrec; i++) {
            rows[i] = new Array();
            for (var j = 0; j < 4; j++) {
                rows[i][j] = jQuery('#rowed2').contents().children().children().children()[totalCells].value;
                totalCells++;
            }
        }
});

I know the above code seems shabby, dirty, unprofessional, whatever you wanna call it. But works exactly how i want.

But if any of you guys have a better idea please let me know

Answer 1

Call editLink function for get the value of cells in jqgrid. Write formatter: editLink at colModel of providerId. In editLink function rowdata.providerName shown a value of ProviderName and rowdata.description shown a value of Description in alert popup. These values are shown when jggrid loads.

$(document).ready(function(){
        //jqGrid
        $("#providerList").jqGrid({
            url:'<%=request.getContextPath() %>/Admin/getProvidersList',
            datatype: "json",               
            colNames:['Id','Edit','Provider Name','Description','Website','Active','Modified Date'],
            colModel:[
                {name:'providerId',search:false,index:'providerId',hidden:true},
                {name:'providerId',search:false,index:'providerId', width:30,sortable: false, formatter: editLink},
                {name:'providerName',index:'providerName', width:200},
                {name:'description',index:'description', width:210},
                {name:'website',index:'website'},
                {name:'isActive',index:'isActive', width:60,},
                {name:'modifyDate',index:'modifiedDate', width:80,},],
                rowNum:20,
                rowList:[10,20,30,40,50],
                rownumbers: true,  
                pager: '#pagerDiv',
                sortname: 'providerName',  
                viewrecords: true,  
                sortorder: "asc",  
        }); 
        $('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
        $('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
        $('#load_providerList').width("130");   
        $("#providerList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});
        $(".inline").colorbox({inline:true, width:"20%"});
    });
    function editLink(cellValue, options, rowdata, action)
    {
        alert('ProviderName: '+ rowdata.providerName);
        alert('Description: '+ rowdata.description);
        return "<a href='<%=request.getContextPath()%>/Admin/editProvider/" + rowdata.providerId + "' class='ui-icon ui-icon-pencil' ></a>";
    }