Refers to: jqgrid: how to set toolbar options based on column value in row selected - jqgrid

Question

my question refers to http://goo.gl/f0Boc
The code works fine for me, but now I want to enable/disable the "Edit-Button" when the value in a cell is "Yes" or "No".
In this example is written:
// you can use getCell or getRowData to examine the contain of
// the selected row to decide whether the row is editable or not
I need an explanation how I could change the code so that the code runs with jqGrid('getCell',rowid,'cellContent')?
What I need is if cellContent is "Yes" then disable "Edit-Button".
Thanks in advance for your efforts,
best regards
Stephan
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:'example.php',
datatype: 'xml',
mtype: 'GET',
colNames:['User ID','Name', 'Firstname','CDS-ID','E-mail','Password', 'Registration
Date','Account Activated', 'Account Activation Date', 'Role'],
colModel :[
{name:'idUser_registration', index:'idUser_registration', width:55,
editable:true, editoptions{readonly:true},search:true},
...
{name:'account_activated', index:'account_activated', width:150, align:'right',
edittype:'checkbox',editoptions: { value:"Yes:No" }, editable:true,
search:true},
... ],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idUser_registration',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'My grid',
editurl: 'example2.php',
beforeSelectRow: function(rowid) {
var selRowId = $(this).getGridParam('selrow'),
celValue = $(this).getCell('getCell', selRowId, 'list_account_activated'),
tr = $("#"+rowid);
// you can use getCell or getRowData to examine the contain of
// the selected row to decide whether the row is editable or not
if (selRowId !== rowid && !tr.hasClass('not-editable-row')) {
// eneble the "Edit" button in the navigator
$("#edit_" + this.id).removeClass('ui-state-disabled');
$("#del_" + this.id).removeClass('ui-state-disabled');
}
else {
// unselect previous selected row
// disable the "Edit" and "Del" button in the navigator
$("#edit_" + this.id).addClass('ui-state-disabled');
$("#del_" + this.id).addClass('ui-state-disabled');
}
return true; // allow selection or unselection
},
loadComplete: function() {
// just one example how to mark some rows as non-editable is to add
// some class like 'not-editable-row' which we test in beforeSelectRow
$("tr.jqgrow:even",this).addClass('not-editable-row');
}
}).jqGrid('navGrid','#pager',
{}, //options
{closeAfterEdit:true,mtype:'GET',editCaption: "Activate
Account",height:400,reloadAfterSubmit:true },
{reloadAfterSubmit:false}, // del options
{} // search options
);
$("#edit_").click(function() {
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#list").jqGrid('editGridRow',gr,{});
});
$("#del_").click(function(){
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#list").jqGrid('delGridRow',gr,{mtype:'GET',reloadAfterSubmit:true});
});
});
</script>

Answer 1

I modified the referenced demo for you. The main part of the code is the following
onSelectRow: function (rowid) {
var thisId = $.jgrid.jqID(this.id),
isCompleted = $(this).jqGrid("getCell", rowid, "isCompleted");
// you can use getCell or getRowData to examine the contain of
// the selected row to decide whether the row is editable or not
if (isCompleted !== "Yes") {
// eneble the "Edit" button in the navigator
$("#edit_" + thisId).removeClass('ui-state-disabled');
$("#del_" + thisId).removeClass('ui-state-disabled');
} else {
// unselect previous selected row
// disable the "Edit" and "Del" button in the navigator
$("#edit_" + thisId).addClass('ui-state-disabled');
$("#del_" + thisId).addClass('ui-state-disabled');
}
}
You can see new demo here.