I’m working with JQGrid and need to control the visibility of inline navigation buttons through JavaScript code. Specifically, I want to be able to hide and show the Add and Cancel buttons based on certain conditions in my application.
I’ve been trying different approaches but can’t seem to find the right method to toggle these buttons dynamically. The grid is set up with inline editing enabled, and I need to control when users can see or interact with these navigation controls.
Has anyone successfully implemented this functionality? What’s the proper way to access and modify the visibility state of these inline editing buttons programmatically?
I’ve encountered a similar issue. A reliable approach is to target the buttons within the grid’s navigation toolbar directly. To do this, utilize the grid’s getGridParam method for accessing the nav bar, and then use jQuery selectors to manipulate the visibility of the buttons. It’s essential to grab a reference to the grid’s pager element and use find() to locate the specific buttons by their classes or IDs. Typically, the Add button has a class of ‘ui-pg-button’, and you can further identify it using the title attribute. The Cancel button usually appears in the inline editing row. Ensure you apply this logic after the grid is fully initialized to ensure the buttons are present in the DOM. Additionally, I recommend wrapping your visibility toggle logic in a try-catch block to handle scenarios where the button elements may not be available based on the grid’s current editing state.
Here’s what worked for me: use navButtonAdd and navButtonRemove with conditional checks. Remove buttons when you want to hide them, add them back when needed.
First, store your button configs in variables. Then use $('#gridid').jqGrid('navButtonRemove', '#pager', 'add') to hide the Add button and $('#gridid').jqGrid('navButtonAdd', '#pager', buttonConfig) to show it again.
For the Cancel button during inline editing, target the specific row’s cancel button: $('#gridid tr[editable="1"] .ui-inline-cancel').hide() or .show().
Timing’s crucial - call these methods after grid initialization completes and inline editing operations finish. I usually add a small delay or use the grid’s event callbacks to make sure the DOM elements are ready.
just use the css display property. grab the button with querySelector and toggle between display none/block. document.querySelector('.ui-pg-div .ui-icon-plus').parentElement.style.display = 'none' hides the add button. for the cancel button during inline editing, try .ui-inline-cancel. way simpler than dealing with jqGrid methods.