Get all the edited rows in jqgrid

Question

How to get all the rows that are edited ?

I have following jqgird, where the users can edit the check boxes of all the records. When the Save button is clicked, I need to know what are all the records edited, I am a new to jquery and jqgrid.

Can anyone help me ?

Here is the jqgrid and html using :

var customerCodesView       = {};
customerCodesView.customerCodesView = function() {

$jq("#customerCodesTable").jqGrid(
        {   
            colNames : ['Cust #','Customer Name', '1', '2','3', '4', '5', '6','7', '8','9', '10', '11', '12', '13', '-1'],

            colModel : [{name : 'customerNumber',index : 'baseCustomerNumber',width : 55, align :'center'},
                        {name : 'customerName',index : 'storeName',width : 100, sorttype :'text', align :'center'},
                        {name : 'creditCodesPermissions.1',index : 'codeOne',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
                         {name : 'creditCodesPermissions.2',index : 'codeTwo',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
                         {name : 'creditCodesPermissions.3',index : 'codeThree',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
                         {name : 'creditCodesPermissions.4',index : 'codeFour',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
                         {name : 'creditCodesPermissions.5',index : 'codeFive',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
                         {name : 'creditCodesPermissions.6',index : 'codeSix',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
                         {name : 'creditCodesPermissions.7',index : 'codeSeven',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
                         {name : 'creditCodesPermissions.8',index : 'codeEight',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
                         {name : 'creditCodesPermissions.9',index : 'codeNine',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
                         {name : 'creditCodesPermissions.10',index : 'codeTen',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
                         {name : 'creditCodesPermissions.11',index : 'codeEleven',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
                         {name : 'creditCodesPermissions.12',index : 'codeTwelve',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
                         {name : 'creditCodesPermissions.13',index : 'codeThirteen',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}},
                         {name : 'creditCodesPermissions.-1',index : 'codeMinusOne',width : 40,align : "center", editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false}}
                       ],

            pager : '#customerCodesTablePager',
            rowNum : 1000,
            loadOnce:true,
            sortorder : "desc",
            viewrecords : true,
            gridview : true,
            autowidth : true,
            multiselect : true,
            jsonReader : {
                repeatitems : false,
                root : function(obj) {
                    return obj;
                },
                page : function(obj) {
                    return 1;
                },
                total : function(obj) {
                    return 1;
                },
                records : function(obj) {
                    return obj.length;
                }
            },
            sortable : true,
            caption : "Credit Codes"
        });

$jq("form#customerCodesForm").submit(
                function() {
                    var newUrl = resourceURL+"&action=searchCreditCodes&"+ $jq(this).serialize();
                    $jq("#customerCodesTable").jqGrid("setGridParam", {"url" : newUrl,datatype : "json"}).trigger("reloadGrid");
                    return false;
                });

$jq(".submit").button( {
    icons : {
        primary : 'ui-icon-circle-zoomin'
    }
});

$jq("#customerCodesTableSave").click(function() {

    var id = $jq("#customerCodesTable").jqGrid('getGridParam','selarrow');
    alert("save");
    if (id) {
        var rowdata = $jq("#customerCodesTable").jqGrid('getRowData', id);
        var postData = JSON.stringify(rowdata);

        alert("postdata"+postData);
    }
    saveGrid();

});


function saveGrid() {
    alert("saveGrid");
    var saveCollection = [];
    //Collect all rows in editmode, the rows to be saved.
    $.each($jq("#customerCodesTable").getDataIDs(), function (index, id) {
        var row = grid.getInd(id, true);
        if (row !== false) {
            if ($(row).attr('editable') === '1') {
                saveCollection.push(id);
            }
        }
    });
    alert(""+saveCollection.toString() + "length" + saveCollection.length );
}

};

HTML :

<div id="customerCodes_Form">
  <form class="customerCodesForm" id="customerCodesForm" method="post">
    <fieldset class="ui-widget ui-widget-content ui-corner-all">
        <legend class="ui-widget ui-widget-header ui-corner-all">Permissions by Customer</legend>
        <div>
            <span>
                <label for="customerNumber">Customer Number</label>
                <input id="customerNumber" name="customerNumber" class=""/>
            </span>
            <button class="submit" type="submit">Search</button>
        </div>
    </fieldset>
</form>
<div id="customerCodesGrid">
    <table id="customerCodesTable"><tbody><tr><td></td></tr></tbody></table>
    <div id="customerCodesTablePager"></div>
    <div style="float:right;">
        <button id="customerCodesTableSave">Save</button>
        <button id="customerCodesTableCancel">Cancel</button>
    </div>
</div>
</div>

Updated : @Justin Thank you for your input, I am new to JQuery but it is always good to get the things correct :) The data in the jqGrid is not filled at the first time, it will be empty. There is a search input box to enter the customer number, after the user hit "Go" button I am making an ajax call to fill up json data in jqgrid, the data looks like this [{"customerNumber":"64093","customerName":"#9735 WATSONTOWN BILO ","creditCodesPermissions.1":"True","creditCodesPermissions.2":"True","creditCodesPermissions.3":"False","creditCodesPermissions.4":"True","creditCodesPermissions.5":"True","creditCodesPermissions.6":"True","creditCodesPermissions.7":"True","creditCodesPermissions.8":"True","creditCodesPermissions.9":"False","creditCodesPermissions.10":"False","creditCodesPermissions.11":"True","creditCodesPermissions.12":"True","creditCodesPermissions.13":"True","creditCodesPermissions.-1":"True"}], I am not sure how to use jsonmap for this kind of output, I will try to figure it out. I will try "celledit" option that you mentioned. Thank you for your time and help.

Answer 1

It's not clear from the code which you posted how you fill the grid contain. You don't define any datatype, so the default value datatype: 'xml' will be used and the jqGrid will try to load XML data per ajax from the url which you also not defined and the default url: "" will be used. So the jqGrid will try to load from your server the XML data. I am not sure that it's want you wanted. Because you use jsonReader you plan probably to use datatype: 'json'. If you would include the test input data in your question it would clear many things.

The next problem. You use special characters in the 'name' property of the colModel ('creditCodesPermissions.7' or even 'creditCodesPermissions.-1') which is not permitted. Depend on how you plan to fill the data you can use jsonpmap or xmlmap having the points, but you should do this only if it is really required and you can't change the format of XML/JSON data. In any way you will need to change the of the 'name' property of the colModel to values like 'creditCodesPermissions7'. You should use no meta-characters (such as !"#$%&'()*+,./:;<=>?@[]^`{|}~) as a literal part of a name because the names will be used to construct the ids of some grid elements.

Additionally I would recommend you to use column templates. You should just define an object like

var myCheckBoxTemplate = {
    width: 40, align: "center", editable: true, edittype: 'checkbox',
    editoptions: { value: "True:False"}, formatter: "checkbox",
    formatoptions: {disabled : false}
};

then the definition of the columns inside of colModel could be like

{name: 'creditCodesPermissions1', index: 'codeOne', template: myCheckBoxTemplate}

It would simplify your jqGrid.

One more small remark: there are no loadOnce:true parameter. Only loadonce:true. The loadOnce:true parameter will be just ignored.

To answer on your main question one need to understand first how the grid data are filled. In any way I would you recommend you use any from three standard editing mode: inline editing, cell editing of the form editing. In your case the inline editing or cell editing would be probably better. In case of the usage of the cell editing the "dirty-cell" class will be added to the cell element (<td> element) and "edited" class will be added to the grid row (<tr> element). So you can use the fact to detect which cells from which rows are changed by the user.