Disable Edit(add, Edit And Delete) Buttons Of Jqgrid Instead Of Hiding(default Behaviour)

Jqgrid by default make add, edit and delete buttons hidden on using appropriate properties with value as false. (ex: {add: false, edit: false, del: false} in nav grid or the other

Solution 1:

• If you want to show it but in disabled state then you should use.

$("#edit_pays_grid").addClass('ui-state-disabled');

Fiddle Demo link

• Alternatively, You can also use below code which will not at all add button into grid.

.navGrid('#pays_grid_pager', { edit: false, add: false, del: false, search: false, refresh: true})

Fiddle Demo link

Solution 2:

The old answer describes how one could implement the behavior, which you need.

First of all it's important that you know ids of all buttons of the navigator bar, which you need to disable. The rules of id building could be a little different depend on the version of jqGrid, which you use (can use) and from the fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). I develop free jqGrid, which I would recommend you to use it, if you don't have any special restrictions. The ids are different for top and bottom pagers (see pager and toppager options of jqGrid). You can just use Developer Tools to examine the ids of the buttons, which you need to disable.

It's important to understand, that you should update the state (disable/enable) of navigator buttons after every selection/deselection of rows. Thus you should use beforeSelectRow callback or jqGridBeforeSelectRow event. To disable the button in case of usage jQuery UI CSS you should add CSS classes ui-state-disabled and ui-jqgrid-disablePointerEvents to the buttons and to enable, you should remove the classes. If you use Bootstrap CSS instead of jQuery UI CSS, then you should use "disabled ui-jqgrid-disablePointerEvents" instead of "ui-state-disabled ui-jqgrid-disablePointerEvents". The class ui-jqgrid-disablePointerEvents is defined in ui.jqgrid.css (ui.jqgrid.min.css) of free jqGrid. If you don't use free jqGrid then you should define it in the following way:

.ui-jqgrid-disablePointerEvents {
    pointer-events: none;
}

(see the lines of the code of ui.jqgrid.css). The usage of pointer-events: none is important if you want to support mostly all web browsers (see here) on different devices.

Solution 3:

When you pass {add:false, del:false} with navButtonAdd(), the add and delete buttons are not at all added to the grid. To disable them first we need to add them by not passing false value to add and del. After adding them we can disable them adding the class 'ui-state-disabled'.