2

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.

santoshM
  • 237
  • 6
  • 24

3 Answers3

3
  • 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

TechnoCrat
  • 710
  • 10
  • 20
1

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks for the response, here I am looking out for only the add, edit and delete buttons (jqGrid's default edit buttons). As passing {refresh: true, edit: false, add: false, del: false, search: true} to navGrid, it makes the three buttons invisible/hidden. Here I want them be visible but in disabled mode. – santoshM Aug 22 '17 at 11:00
  • @santoshM: You are welcome! Please read my answer carefully. It's important to know which version of jqGrid you use and from which fork of jqGrid. Which pager you use (`toppager` or `pager` or both)? Do you tried [the demo](http://www.ok-soft-gmbh.com/jqGrid/EdableDisableEditDelNavigatorButtons.htm) from [the old answer](https://stackoverflow.com/a/5376355/315935), which I referenced? The "Add" button should be always enabled, but Edit and Delete should be enabled only if some row is selected and the row is editable. – Oleg Aug 22 '17 at 11:10
  • With my fix, if I pass {refresh: true, edit: false, add: false, del: false, search: true} to navGrid, the buttons should be disabled and not hidden. – santoshM Aug 22 '17 at 11:11
  • @santoshM: Sorry, do you read my questions in previous comments? Do you tried old demo? It **disables** the buttons in navigator bar and enable there on selection of row if the row is editable (don't has `not-editable-row` class). – Oleg Aug 22 '17 at 11:16
  • Sorry, I could not read your last question. As I saw it after submitting my comment. I went through your question and demo. It half suits my question. As you are disabling the buttons (edit & delete) as the grid loads and on selecting a row. Here I need to check, if the {edit: false, del:false} param is passed to navGrid and if passed with false value only I need to make the buttons disabled and not hidden. – santoshM Aug 22 '17 at 11:23
  • 1
    @santoshM: If you use for example `del:false` then Delete button will be **not created** at all. It's clear that you should don't use `del:false`, but disable the Delete button instead directly after it is created by `navGrid`. You need additionally reset the state (enable or disable) of the button on selection of rows using `beforeSelectRow` callback or `jqGridBeforeSelectRow` event and to reset the state on reloading the grid (for example inside of `loadComplete`). – Oleg Aug 22 '17 at 11:28
  • Thanks. Really I don't know that, when we use del:false then Delete button will not be created at all. Thanks for the continuous help.. :) – santoshM Aug 22 '17 at 11:32
  • @santoshM: You are welcome! I recommend you to examine navigator bar with respect of Developer Tools of Chrome/IE (press F12 to start). You will see all buttons. [Another old answer](https://stackoverflow.com/a/7057838/315935) shows how to create navigator bar with many buttons, but hide unneded buttons and to show/hide there *dynamically* (see the checkboxs above the grid in [the old demo](http://www.ok-soft-gmbh.com/jqGrid/HideShowNavGridButtonsDynamically.htm)). It's important **to create** buttons, which could be needed later. One can hide the buttons till the buttons will be needed. – Oleg Aug 22 '17 at 11:39
0

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'.

santoshM
  • 237
  • 6
  • 24