show/hide jqgrid delete button

Question

I want to show/hide jqgrid delete button on the basis of specific data in jqGrid.

 $('#jqgFlagger').jqGrid('navGrid', '#jqgpFlagger',
            { add: false, del: false, edit: false, search: false },
            { width: 'auto', url: '/DtlmTransaction/UpdateRole' },
            { width: 'auto', url: '/DtlmTransaction/InsertRole' },
            { width: 'auto', url: '/DtlmTransaction/DeleteMultiple' });

Above is the code that shows that I'm not using jqgrid own delete option but the custom delete option from the action which is as under;

 colModel: [
                    { name: 'FlaggerName', resizable: false, index: 'FlaggerName', align: 'left', width: 312, editable: false },
                    { name: 'DataFileReceived', formatter: DataFileReceivedFormatter, resizable: false, index: 'DataFileReceived', width: 130, align: 'left', search: false, edittype: 'text' },
                    { name: 'ProcessStartDate', formatter: ProcessStartDateFormatter, resizable: false, index: 'ProcessStartDate', width: 130, align: 'left', align: 'left', search: false, edittype: 'text' },
                    { name: 'ProcessCompleteDate', formatter: ProcessCompleteDateFormatter, resizable: false, index: 'ProcessCompleteDate', width: 150, align: 'left', search: false, edittype: 'text' },
                    { name: 'Total', resizable: false, index: 'Total', width: 53, align: 'center', search: false },
                    { name: 'Identical', resizable: false, index: 'Identical', width: 53, align: 'center', search: false },
                    { name: 'Differences', resizable: false, index: 'Differences', width: 51, align: 'center', search: false },
                    { name: 'StateAbri', resizable: false, index: 'StateId', width: 48, align: 'left' },
                    { name: 'CountyName', resizable: false, index: 'CountyName', width: 86, align: 'left' },
                    { name: 'Name', resizable: false, index: 'ServiceName', align: 'left', width: 127 },
                    { name: 'StatusName', formatter: statusFormatter, resizable: false, index: 'StatusId', align: 'center', width: 70, search: false },
                    { name: 'StatusColor', hidden: true, resizable: false, index: 'StatusColor', align: 'left', width: 70, search: false },
                    { name: 'bitDefault', formatter: bitDefaultFormatter, resizable: false, index: 'bitDefault', align: 'left', width: 40, search: false, editoptions: { value: '1:0' }, editable: false, edittype: 'checkbox' },
                    { name: 'Names', resizable: false, index: 'Names', align: 'left', width: 100,
                        search: false, sortable: false, formatter: editFmatter
                    },
                    { name: 'act', index: 'act', width: 50, align: 'center', sortable: false, formatter: 'actions',
                        formatoptions: {
                            keys: true,
                            editformbutton: false,
                            delbutton: true,
                            editbutton: false,
                            delOptions: { url: '/DtlmTransaction/DeleteMultiple' }
                        }
                    }],

Here you can see that in action i've enable delButton:true. Now i want to show/hide delete button on the jqgrid row's field data condtion. For example if i get the row's field value (success,complete, etc) then i want to hide this button. How can i do it? Please suggest.

Answer 1

Look at the demo from the answer. One more option is to disable navigator buttons based on the selected row like it shows in the demo from another old answer.