santoshM santoshM - 1 month ago 13
jQuery Question

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 way).

Here, I want to disable these buttons instead of hiding. Can anyone help on this. I mean to say is, want to change the default functionality of hiding to disabling.

Thanks in advance.

Answer Source

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.