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 '';
}
