Geek Answers Handbook

Prevent edit (add, edit and delete) jqgrid buttons instead of hiding (default behavior)

Jqgrid by default makes the add, edit, and delete buttons hidden when using the appropriate properties with a value of false. (for example: {add: false, edit: false, del: false} in the navigation grid or vice versa).

Here I want to disable these buttons, not hide. Can anyone help with this. I want to say, I want to change the default functionality for hiding before disconnecting.

Thanks in advance.

+2
source share
3 answers

The old answer describes how you can implement the behavior you need.

First of all, it is important to know the identifiers of all the buttons on the navigation bar that you need to disable. The rules for constructing id may differ slightly from the version of jqGrid that you use (you can use) and from fork jqGrid ( free jqGrid , commercial Guriddo jqGrid JS or the old jqGrid in version <= 4.7). I developed a free jqGrid that I would recommend you use if you have no particular restrictions. IDs are different for the top and bottom pagers (see pager and toppager jqGrid parameters). You can simply use the developer tools to check the identifiers of the buttons that you want to disable.

It is important to understand that after each selection / deselection of rows, you need to update the state (disable / enable) of the navigator buttons. So you should use the beforeSelectRow callback or jqGridBeforeSelectRow . To disable a button when using jQuery UI CSS, you must add the CSS classes ui-state-disabled and ui-jqgrid-disablePointerEvents to the buttons and enable, you must remove the classes. If you use CSS Bootstrap instead of jQuery UI CSS, then you should use "disabled ui-jqgrid-disablePointerEvents" instead of "ui-state-disabled ui-jqgrid-disablePointerEvents" . The ui-jqgrid-disablePointerEvents is defined in ui.jqgrid.css ( ui.jqgrid.min.css ) of a free jqGrid. If you are not using the free jqGrid, you should define it as follows:

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

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

+1
source
  • If you want to show it, but in the off state, you should use.
 $("#edit_pays_grid").addClass('ui-state-disabled');

Script Demo Link

  • Alternatively, you can also use the code below, which will not add a button to the grid.

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

Script Demo Link

+1
source

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

0
source

More articles:


All Articles