4

I have a column field type having values (editable, readonly). all the rows will have one of these values populated.

I want to enable/disable toolbaroption edit only if column value is editable for selected row.

how can i achieve that in jqgrid.

harish
  • 149
  • 1
  • 4
  • 14

1 Answers1

13

If I understand you correct you want to enable/disable "Edit" or "Delete" buttons of the navigator based of the selected row. So that you will have enter image description here

if no rows is selected or the selected row is non-editable or the standard navigator toolbar enter image description here

if the row is editable.

The criteria whether the column "editable" or "readonly" seems me wrong because it is criteria column on the column and not on the row, but you can implement easy your own custom criteria.

The implementation could 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 "Edit" and "Del" buttons we add/remove the 'ui-state-disabled' class on the buttons of the navigator toolbar. In the code above I mark all rows with even numbers as "non-editable". In your case you can use any other criteria which has more sense.

You can see the demo live here.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • thanks for the perfect answer. the criteria to disable/enable edit/delete column value of selected row. the scenario is: there are creator/viewer/approver in the system. I have the column which stores the status of the entries: new/submitted/approved. once the column:status has value submitted it is not editable. so for creator column:status new means editable row but column:status approved means non-editable row. hence the criteria to enable or disable the delete/edit is based on value in the column of the selected row rather than based on the row. – harish Mar 21 '11 at 10:49
  • @Oleg: Why do you `if (selRowId !== rowid`? If i select the editable row and than click it a second time the edit/delete buttons get disabled. By intention? – Stahlkocher Jun 10 '13 at 10:07
  • @Stahlkocher: I used the code inside of `beforeSelectRow`. It will be called *before* the row will be selected. If `selRowId === rowid` then we select *previously selected row*. In other words the user clicks one more time on selected row. You can decide yourself which action would be mostly reasonable in the case. – Oleg Jun 10 '13 at 10:25