jqGrid navButtonAdd - Javascript

The jqGrid navButtonAdd is a method in Javascript that allows you to add custom buttons to the navigation bar of your jqGrid. This method is super useful and can improve the user experience by providing quick access to frequently used functions.

Syntax

navButtonAdd (grid_id, pager_id, options, separator)

Parameters

• grid_id: This is the ID of the jqGrid.
• pager_id: This is the ID of the pager element.
• options: This is an object that contains the options for the button.
• separator: This parameter is optional and specifies whether to add a separator before the button.

Examples

Here's an example of how to use the navButtonAdd() method in your Javascript code:

$("#myGrid").jqGrid('navButtonAdd','#myPager',{
    caption:"My Button",
    buttonicon:"ui-icon-plus",
    onClickButton: function(){ alert("Hello World"); },
    position: "last"
});

This will add a button to the end of the navigation bar with a caption "My Button", an icon "ui-icon-plus", and an alert when clicked.

Options

Here are some of the most commonly used options for jqGrid navButtonAdd():

• caption: The caption for the button.
• buttonicon: The icon class for the button.
• onClickButton: This is a function that will be called when the button is clicked.
• position: The position of the button in the navigation bar.
• title: The title text that will appear when the user hovers over the button.
• cursor: The cursor style for the button.

Conclusion

The jqGrid navButtonAdd method is a great way to add custom buttons to your jqGrid navigation bar. It's easy to use and can improve the user experience by providing quick access to frequently used functions. With many options available, you can easily customize the buttons to fit your needs.