Conditionally enable or disable delete record button based on the Content of the cell (not just the the id)

Question

I am new to jquery and jqgrid, but i am comfortable with javascript. However I have managed to install jqgrid after some effort.

I have been trying a to find a solution to enable ore disable the delete feature from the navigation bar based on the value of the 'lock' column. I read the following link jqgrid: how to set toolbar options based on column value in row selected

But I was not able to get the contents of 'lock' cell for the javascript. I also tried to format the lock string without effect.

the jqgrid is loaded via php. The script is here http://www.trirand.net/demophp.aspx

The php script is the following

require_once("JQGrid/jq-config.php");
require_once("JQGrid/php/jqGridASCII.php");
require_once("JQGrid/php/jqGridPdo.php");
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
$grid = new jqGridRender($conn);
$grid->SelectCommand = 'SELECT * FROM  `device_assignement` ';
$grid->dataType = 'json';
$grid->setColModel();
$grid->setUrl('Grid_ecu_display.php');
$grid->setColProperty("company", 


array("label"=>"Dealer Name", 
"width"=>350
), 
array( "searchrules"=> 
array("searchhidden"=>false, "required"=>false, "search"=>false)));




$grid->setGridOptions(array( 
"sortable"=>true, 
"rownumbers"=>true, 
"rowNum"=>40, 
"rowList"=>array(10,50,100), 
"sortname"=>"ecu",  
"width"=>940,  
"height"=>400,  
"shrinkToFit"=>true,  
"hidden" => true,
"hoverrows"=>true ));


$grid->toolbarfilter = true;
$grid->setFilterOptions(array("stringResult"=>true));
$grid->setColProperty("ecu", array(
"label"=>"ECU Number" ,  
"sortable"=>true
));

$grid->setColProperty("lock", array(
"label"=>"<i>Lock</i>" ,  
"width"=>60,
"sortable"=>false,
"editable"=>true
));

etc etc...

$ecu = jqGridUtils::GetParam('ecu'); 
// This command is executed immediatley after edit occur. 
$grid->setAfterCrudAction('edit', "UPDATE  `ecu_master` SET  `lock` =  '1'             WHERE  `ecu` =?",array($ecu));  


$grid->navigator = true;

$grid->setNavOptions('navigator', array("pdf"=>true, "add"=>false,"edit"=>true,"del"=>false,"view"=>false, "excel"=>true)); 



$grid->setColProperty('company',array("searchoptions"=>array("sopt"=>array("cn"))));
$oper = jqGridUtils::GetParam("oper"); 
if($oper == "pdf") { 
$grid->setPdfOptions(array( 
// set the page orientation to landscape 
"page_orientation"=>"L", 
// enable header information 
"header"=>true, 
// set bigger top margin 
"margin_top"=>27, 
// set logo image 
//"header_logo"=>"logo.gif", 
// set logo image width 
//"header_logo_width"=>30, 
//header title 
"header_title"=>"Autograde CMS ECU Allocation List", 
// and a header string to print 
"header_string"=>"$SoftwareVersion" 
)); 
} 
// Run the script
$grid->renderGrid('#grid','#pager',true, null, null, true,true);

This is included in another php script where. All I want is to enable or disable the delete row button based on the "lock" value If this seems too basic and ridiculous please let me know I will understand.

Answer 1

If the user click on a cell of the grid the whole row will be selected and the callback function onSelectRow will be called. So you should implement the callback function onSelectRow which has the rowid (the id of the <tr>) as the first parameter. Inside of the onSelectRow handler you can call getCell method. Depend on the value of the 'lock' column (which can be hidden if needed) you can enable of disable "Edit" and "Delete" buttons of the navigator bar.

So the code can be about the following:

$('#list').jqGrid({
    ... all other jqGrid options which you need
    pager: '#pager',
    onSelectRow: function (rowid) {
        var gridId = $.jgrid.jqID(this.id);
        // test 'lock' column for some value like 'yes'
        if ($(this).jqGrid('getCell', rowid, 'lock') === 'yes') {
            // disable the "Edit" and "Delete" buttons of the navigator
            $("#edit_" + gridId).addClass('ui-state-disabled');
            $("#del_" + gridId).addClass('ui-state-disabled');
        } else {
            // enable the "Edit" and "Delete" buttons of the navigator
            $("#edit_" + gridId).removeClass('ui-state-disabled');
            $("#del_" + gridId).removeClass('ui-state-disabled');
        }
    }
}).jqGrid('navGrid', '#pager');

Because you are new in jqGrid I want comment the usage of $.jgrid.jqID() function. In the most cases if returns the value of the input parameter: 'list' in case of the example. It's needed for more common case if the id of the grid (the id of the <table> element) contains meta-characters. $.jgrid.jqID() function include additional escape characters (two backslashes: \\) before any meta-character.