usability - How do I customize the Add button in jqGrid?

Question

I have a jqGrid and when I do a seach I get a small dialog. There is a Add button at the top which has a "+" sign to add rows for advanced searching. Is it possible to change this button text to a plain old school "Add" without hacking into js library. Is there any way by writing an extendion? Is so how?

<input type="button" value="+" title="Add rule" class="add-rule ui-add">

Answer 1

The method navGrid has some parameters which can be used to change the look of navigator buttons. I used additionally toppager: true option of jqGrid and cloneToTop: true option of navGrid for the case that one uses top pager. If one just create the navigator buttons with respect of the call

$grid.jqGrid('navGrid', '#pager', {
    cloneToTop: true,
    view: true,
    add: true,
    edit: true,
    addtext: 'Add',
    edittext: 'Edit',
    deltext: 'Delete',
    searchtext: 'Search',
    refreshtext: 'Reload',
    viewtext: 'View'
});

one will see the results like

I used rowNum: 2 for the tests only to reduce the height of the pictures.

If I correct understand you, you want to have pure text buttons. To remove the icons from the buttons one can execute the following additional lines

var pagerId = 'pager', gridId = $.jgrid.jqID($grid[0].id);
$('#' + pagerId).find('.navtable span.ui-icon').remove();
$('#' + gridId + '_toppager').find('.navtable span.ui-icon').remove();

The gridId will be set to 'list'. One need to use $.jgrid.jqID if the grid id could contain meta-characters. The results will be

Next step will be to fix right and left the padding or margin of the buttons to show the texts better:

.ui-jqgrid .ui-jqgrid-pager .navtable .ui-pg-div,
.ui-jqgrid .ui-jqgrid-toppager .navtable .ui-pg-div {
    padding-right: 3px;
    padding-left: 3px;
}

The results will be improved to the following

Now we need fix the position of the pager. We can do this with respect of

$('#' + pagerId + '_left').width($('#' + pagerId + ' .navtable').width());
$('#' + gridId + '_toppager_left').width($('#' + gridId + '_toppager .navtable').width());
$('#' + pagerId + '_center')[0].style.width='';
$('#' + gridId + '_toppager_center')[0].style.width='';

and have the following results

or remove additionally unused right part of the pager with

$('#' + pagerId + '_right').remove();
$('#' + gridId + '_toppager_right').remove();

which places the pager in the middle of the rest place on the pager:

In my opinion it's mostly the matter of taste which look is better. You can see the resulting demo here.

Alternatively you can do use icons over the text, but place the text under the icons. You can see details in the demo which produces the following results:

UPDATED: To customize the "Add rule" or "Add group" buttons you can use afterRedraw option:

afterRedraw: function () {
    $('input.add-rule',this).val('Add new rule');
    $('input.add-group',this).val('Add new rule group');
}

The demo which use the option produce the searching dialog like the following:

(the button "Add group" exist if multipleGroup: true are used and the "Add rule" button exist if multipleSearch: true are used).

UPDATED 2: One can improve the visibility of the searching dialog if one would use jQuery UI Buttons:

afterRedraw: function () {
    $('input.add-rule',this).val('Add new rule').button();
    $('input.add-group',this).val('Add new group or rules').button();
    $('input.delete-rule',this).val('Delete rule').button();
    $('input.delete-group',this).val('Delete group').button();
}

The result dialog can be like the following