Change navigation bar icons in jqGrid

Question

I want to change the order of the navigation button icons for the add, update and delete button in a jqGrid. How can I do that?

Answer 1

You can reorder the navigation buttons just by usage of the functions like jQuery.insertBefore, jQuery.before, jQuery.insertAfter or jQuery.after. It's only important to know the ids of the cells used for the standard buttons. The ids will be build from the prefixes "add_", "del_", "search_", "refresh_", "edit_" and the id of the grid. For example if you have the grid with the id="list", then the cell of Delete button has the id="del_list".

The demo uses the following code

$("#del_list").insertBefore("#add_list");
$("#search_list").insertBefore("#del_list");
$("#refresh_list").insertBefore("#search_list");

to reorder the navigator buttons to the following: