Jqgrid: how to set toolbar options based on column value in row

Question

I have a column field type with values ​​(editable, read-only). all rows will have one of these values.

I want to enable / disable toolbar editing only if the column value is available for the selected row.

how can i achieve this in jqgrid.

Answer 1

If you correctly understood that you want to enable / disable the "Change" or "Delete" buttons of the navigator based on the selected line. So you have

if none of the lines is selected or the selected line is not edited, or the standard navigator toolbar

if the line is editable.

The criteria that the "editable" or "readonly" column seems wrong to me because it is a criteria column in a column, not a row, but you can easily implement your own custom criteria.

Implementation may be

var myGrid = jQuery("#list"); myGrid.jqGrid({ /* definition of jqGrid */ beforeSelectRow: function(rowid) { var selRowId = $(this).getGridParam('selrow'), 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'); // disable "Edit" and "Delete" button at the beginning $("#edit_" + myGrid[0].id).addClass('ui-state-disabled'); $("#del_" + myGrid[0].id).addClass('ui-state-disabled'); 

To enable / disable the "Change" and "Del" buttons, we add / remove the "ui-state-disabled" class on the buttons of the navigator toolbar. In the above code, I mark all lines with even numbers as “uneditable”. In your case, you can use any other criteria that make more sense.

You can see the demo here .