JQgrid, Set a Cell value empty in change event of another cell

Question

I have a jQGrid with three columns. First one is a dropdown (type: select) field, second one is custom type for Check box list and the third one is text field. The requirement is when the user change the value of the dropdown field (DocGroupname), then the DocList field should be empty. So we need to set DocList column's value empty when user change the value of DocGroupName column.

I tried like following. While changing the dropdown value, called a function named myfunction.Inside the function I set the value for DocList column is null. But its not working, So what i did wrong? and please anybody help me to find the solution.

JQGrid Code,

function ReqKYCGrid()
{

$("#divmsgg").show();

                 var DocGroupName = $.ajax
                ({
                    type: 'GET',
                    async: false,
                    url: RootUrl + "EXEntityTypeKYC/GetDocumentGroupList",
                    cache: true,
                    contentType: 'application/json; charset=utf-8',
                    data: { "projectSeq":$("#Id").val(),"StartDate":$("#StartDate").val(),"EndDate":$("#EndDate").val() },
                    success: function (result) {
                        if (!result) alert('No Document Group Found !!');
                    },
                    error: function (error) {
                        alert('Error' + error);
                    }
                }).responseText; 


       jQuery("#grdForReqKYC").jqGrid({
         url: RootUrl+ 'EXEntityTypeKYC/ReqKYCGridData',
        datatype: 'json',
        mtype: 'POST',
        colNames: ['id', 'Document Group Name','Document Name','No of Mandatory'],
        colModel: [
                    { name: 'id', index: 'id', width: 30, sorttype: "int", editable: false,hidden:true },                       
                    { name: 'DocGroupName', index: 'DocGroupName', width: 310, editable: true, edittype: "select", editrules: { required: true} , 
                     editoptions: { 

                         dataInit: function (element) {
                                        $(element).focusout(function (e) {
                                        if(this.value!="")
                                        {

                                        }
                                        });
                                    },

                         dataEvents: [{type: 'change', fn: function(e){
                            myfunction(e);
                            }
                         }]}

                     },

                    { name: 'DocList', index: 'DocList', width: 310, hidden:false,editable: true,edittype: "custom", editoptions: {  dataInit: function (element) {

                                        $(element).click(function (e) {

                                        });
                                    },
                     custom_element:MultiCheckElem, custom_value:MultiCheckVal  }},
                     { name: 'Mandatory', index: 'Mandatory', width: 310, editable: true, edittype: "text", editoptions: { maxlength: "1" , dataInit: function (element) {
                                $(element).keydown(function (e,val) {
                                 var ctrl = e.ctrlKey;
                                    var key = e.charCode || e.keyCode || 0;
                                    if (ctrl && ((key == 88) /* CUT */ || (key == 67) /* COPY */ || (key == 86) /* PASTE */ )) { return false;
                                    }
                                    if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) {
                                        return false;
                                    }

                                    var rowDataObj=$('#grdForReqKYC').jqGrid('getRowData',cellRowId);
                                    var rowData =JSON.parse(JSON.stringify(rowDataObj)); 
                                    var docListValue=rowData["DocList"].split(',');

                                    if(((docListValue.length -1)==0 )  && rowData["DocList"]=='')
                                    {
                                        alert("Please Choose Document Name");
                                        return false;
                                    }

                                    if(e["char"]> (docListValue.length ))
                                    {
                                     return false;
                                    }




                                });
                            }}, editrules: { required: true} }
                    //, list:'Check1,Check2,Check3,Check4'
                 ],  

         loadComplete: function () {      
                if(DocGroupName!=null )
                        $("#grdForReqKYC").setColProp('DocGroupName', { editoptions: { value: JSON.parse(DocGroupName)} });

                 //if(DocumentName!=null )
                 //alert(DocumentName+ ' ---- '+ JSON.parse(DocumentName));
                       // $("#grdForReqKYC").setColProp('DocumentName', { editoptions: { value: JSON.parse(DocumentName)} });
                        //$("#grdForReqKYC").setColProp('DocList', { editoptions: { list: CheckedDocumentName} });


        },

        cellEdit: true,
        rowNum: 1000,
        //gridview: true,
        rownumbers: true,
        //autoencode: true,           
        height: 120,
         width: 700,
        cellsubmit: 'clientArray',
        caption: "Required Document for KYC",
        multiselect: true,
        // onSelectRow: function(id){alert(id)},

        postData: {
            "MSTSeq": $("#Id").val(),
            "data": $("#KYCGrid").val()
        },
        onCellSelect: function (rowid, iCol, cellcontent, e) {
         //alert(rowid);
         cellRowId=rowid;
        }
    });


    //End Of Grid

      $(window).on("resize", function () {
        var newWidth = $("#grdForReqKYC").closest(".ui-jqgrid").parent().width();
        if(newWidth>900)
        {
        jQuery("#grdForReqKYC").jqGrid("setGridWidth", 900, true);

        }
        else{
         jQuery("#grdForReqKYC").jqGrid("setGridWidth", newWidth, true);
        }
    });

    // Start of AddNew/Delete function for Grid
   $("#btnAddNew").click(function () {

        if (ValidateRow($("#grdForReqKYC"))) {
            var idAddRow = $("#grdForReqKYC").getGridParam("reccount")
            emptyItem = [{ id: idAddRow + 1, FinancialYearNames: "", EntityName: "", AllocatedValue: "", ProjectDesc: ""}];
            jQuery("#grdForReqKYC").jqGrid('addRowData', 0, emptyItem);
        }
    });


    $("#btnDelete").click(function () {
         $("#grdForReqKYC").jqGrid("editCell", 0, 0, false);
        var gr = jQuery("#grdForReqKYC").jqGrid('getGridParam', 'selarrrow');
        if (gr != "") {
            for (var i = 0; i <= gr.length; i++) {
                jQuery("#grdForReqKYC").jqGrid('delRowData', gr[i]);
            }
            for (var i = 0; i <= gr.length; i++) {
                jQuery("#grdForReqKYC").jqGrid('delRowData', gr[i]);
            }
        }
        else
            alert("Please Select Row(s) to delete!");
    });

    // End of AddNew/Delete function for Grid

}

myfunction Code,

function myfunction(e)
{ 
  // grid.jqGrid('setCell', 1, 'DocList', '', null, null, true);
   $("#grdForReqKYC").setColProp('DocList', { editoptions: { formatter: nullFormatter} });
 }

 function nullFormatter()
 {
    return '';
 }

Answer 1

What You need to do is change the cell value on beforeSaveCell function Here is a solution I created for you on jsfiddle.

var currentRow = 0;  

 function getAllSelectOptions(){
     var states = { '1': 'Alabama', '2': 'California', '3': 'Florida', 
                   '4': 'Hawaii', '5': 'London', '6': 'Oxford' };

      return states;

    }
            validateText = function (value, colname) {
         // do validations if any and return false               
              return [true];
            };

            "use strict";
            var mydata = [
                    {id:"1", DocGroupName: "2", DocList: "y", Mandatory: "z"},
                    {id:"2", DocGroupName: "6", DocList: "y", Mandatory: "z"},
                ];
            $("#list").jqGrid({


                //url:'php.scripts/customers.get.php',
                //datatype: 'xml',
                //mtype: 'POST',
                datatype: "local",
                data: mydata,
                height: "auto",
              colNames: ['id', 'Document Group Name','Document Name','No of Mandatory'],
              colModel :[
                    {name:'id', index:'id', width:55},
                    {name:'DocGroupName', index:'DocGroupName', width:90, editable: true,edittype: 'select', 
                                            formatter: 'select',

                                            editoptions:{value: getAllSelectOptions()}, "editrules":{"custom":true,"custom_func":validateText}},
                    {name:'DocList', index:'DocList', width:90, editable: true },
                    {name:'Mandatory', index:'Mandatory', width:90, editable: true}

                ],
                pager: '#pager',
                rowNum:10,
                rowList:[10,20,30],
                sortname: 'idcustomers',
                sortorder: 'asc',
                viewrecords: true,
                gridview: true,
                caption: 'Customers',
                cellEdit: true,
                cellsubmit: 'clientArray',
                afterSaveCell: function(rowid,name,val,iRow,iCol) {
                if(name=='DocGroupName')
                 {
                     var row = $('#list').jqGrid('getRowData',currentRow);      
                     row.DocList='';
                     $('#list').jqGrid('setRowData',currentRow,row);       
                 }                  
                },
                beforeSaveCell: function(rowid,name,val,iRow,iCol) {
                 // var row = $("#list").getRowData(rowid);
                   var row = $('#list').jqGrid('getRowData',rowid);
                   currentRow= rowid;

                },

 });