jqgrid - toppager[ toolbar icons] comes in multiple rows

Question

I'm using latest free-jqgrid 4.9.2

My toolbar(toppager) buttons goes to next line though loads of space there in grid width. Please find attached screen shot. Any reason ?

I tried the below CSS code as well, but no luck;

  /*Toolbar customization*/
    .ui-jqgrid .ui-jqgrid-toppager {    
        width: auto !important;/*1200 px*/
    }

Full jqGrid script -

$(document).ready(
  function() {

    /**
     * User code tab
     */
    var userGrid = $("#userGrid"),
      oldFrom = $.jgrid.from,
      lastSelected;
    var oldFrom = $.jgrid.from;
    var lastSelected;

    $.jgrid.from = function(source, initalQuery) {
      var result = oldFrom.call(this, source, initalQuery),
        old_select = result.select;
      result.select = function(f) {
        lastSelected = old_select.call(this, f);
        return lastSelected;
      };
      return result;
    };

    $("#userGrid").jqGrid({
      //sortable: true,//Columns reordering need to be disabled for frozen column working
      //scroll: 1,//true scrolling rows - paging is not working when we enable scrolling. give fixed height then this will go good.. :)
      url: 'list_user_detail',
      datatype: 'json',
      colNames: [jQuery.i18n.prop('userdetail.table.column.id'),
        jQuery.i18n.prop('userdetail.table.column.username'),
        jQuery.i18n.prop('userdetail.table.column.password'),
        jQuery.i18n.prop('userdetail.table.column.active'),
        jQuery.i18n.prop('userdetail.table.column.firstname'),
        jQuery.i18n.prop('userdetail.table.column.lastname'),
        jQuery.i18n.prop('userdetail.table.column.department'),
        jQuery.i18n.prop('userdetail.table.column.email'),
        jQuery.i18n.prop('userdetail.table.column.dob'),
        jQuery.i18n.prop('userdetail.table.column.country'),
        jQuery.i18n.prop('userdetail.table.column.role'),
        ""
      ],
      colModel: [{
        name: 'id',
        index: 'id',
        width: 80,
        editable: true,
        sortable: true,
        align: 'center',
        sorttype: 'integer',
        searchoptions: {
          sopt: ['eq', 'ne', 'le', 'lt', 'gt', 'ge'] //for filter functionality - specify the search options
        },
        editoptions: {
          readonly: true,
          size: 5
        },
        formoptions: {
          rowpos: 1,
          colpos: 1
        }
      }, {
        name: "username",
        index: "username",
        width: 120,
        align: 'center',
        sortable: true,
        editable: true,
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        frozen: true,
        editoptions: {
          size: 30
        },
        editrules: {
          required: true,
          custom: true,
          custom_func: usernameCheck
        },
        formoptions: {
          label: jQuery.i18n.prop('userdetail.table.form.label.username')
        }
      }, {
        name: "password",
        index: "password",
        width: 100,
        align: 'center',
        sortable: false,
        editable: true,
        hidden: true,
        hidedlg: true, //to remove this column from column chooser as well
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        frozen: true,
        editoptions: {
          size: 30
        },
        //editrules are set as part of form edit validation so we can mark required for all mandatory fields
        editrules: {
          required: true,
          custom: true,
          edithidden: true,
          custom_func: passwordCheck
        },
        formoptions: {
          label: jQuery.i18n.prop('userdetail.table.form.label.password')
        }
      }, {
        name: "active",
        index: "active",
        width: 80,
        sortable: true,
        align: 'center',
        stype: "select", //if stype is enabled then sopt will not work - stype is needed only when search should have select option
        editable: true,
        edittype: "select",
        formatter: "select",
        editoptions: {
          value: ":;1:Yes;0:No" //Default 0
        },
        cellattr: function(rowId, val, rawObject) {
          if (val == 1) {
            return " class='ui-state-useractive'";
          } else if (val == 0) {
            return " class='ui-state-userinactive'";
          }
        },
        formoptions: {
          //rowpos: 3,
          //colpos: 1
        }
      }, {
        name: "firstname",
        index: "firstname",
        width: 120,
        align: 'center',
        sortable: true,
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        editable: true,
        editoptions: {
          size: 30
        },
        editrules: {
          required: false,
          custom: true,
          custom_func: onlyAblhabetCheck
        }
      }, {
        name: "lastname",
        index: "lastname",
        width: 120,
        align: 'center',
        sortable: true,
        editable: true,
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        editoptions: {
          size: 30
        },
        editrules: {
          required: false,
          custom: true,
          custom_func: onlyAblhabetCheck
        }
      }, {
        name: "department",
        index: "department",
        width: 120,
        align: 'center',
        sortable: true,
        editable: true,
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        editoptions: {
          size: 30
        },
        editrules: {
          required: false,
          custom: true,
          custom_func: onlyAblhabetCheck
        }
      }, {
        name: "email",
        index: "email",
        align: 'center',
        width: 220,
        sortable: false,
        editable: true,
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        editoptions: {
          size: 30
        },
        editrules: {
          required: true,
          custom: true,
          custom_func: emailCheck
        },
        formoptions: {
          label: jQuery.i18n.prop('userdetail.table.form.label.email')
        }
      }, {
        name: "birthday",
        index: "birthday",
        width: 120,
        sortable: true,
        align: 'center',
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en'],
          dataInit: function(e) {
            $(e).datepicker({
              dateFormat: 'dd-mm-yy',
              maxDate: new Date()
            });
          }
        }, //for Search/Filter functionality - specify the search options
        editable: true,
        editoptions: {
          size: 10,
          dataInit: function(e) {
            $(e).datepicker({
              dateFormat: 'dd-mm-yy',
              maxDate: new Date()
            });
          }
        },
        formoptions: {
          //rowpos: 3,
          //colpos: 2
        }
      }, {
        name: "country",
        index: "country",
        width: 120,
        align: 'center',
        sortable: true,
        editable: true,
        searchoptions: {
          sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
        }, //for Search/Filter functionality - specify the search options
        editoptions: {
          edittype: 'text',
          size: 30
        },
        editrules: {
          required: false,
          custom: true,
          custom_func: onlyAblhabetCheck
        }
      }, {
        name: "role",
        index: "role",
        width: 100,
        sortable: true,
        align: 'center',
        stype: "select", //if stype is enabled then sopt will not work - stype is needed only when search should have select option
        //searchoptions: {sopt:['cn','eq','ne','bw','bn','nc','ew','en']},//for Search/Filter functionality - specify the search options
        editable: true,
        edittype: "select",
        formatter: "select",
        editoptions: {
          value: ":;ADMIN:Admin;USER:User" //Default User
        },
        formoptions: {
          //rowpos: 3,
          //colpos: 1
        }
      }, {
        name: "oldPassword",
        index: "oldPassword",
        width: 10,
        sortable: false,
        editable: true,
        hidden: true,
        hidedlg: true //to remove this column from column chooser as well
      }],
      pager: "#userPager",
      iconSet: "fontAwesome",
      rowNum: 8,
      rownumbers: false, //Row numbers
      rowList: [8, 12, 20],
      height: 'auto',
      width: 'auto', //Autowidth
      loadonce: true,
      sortable: true,
      sortname: 'No',
      sortorder: 'desc',
      viewrecords: true,
      shrinkToFit: false,
      ignoreCase: true, //Case insensitive search
      gridview: true, //renders data more faster??
      //viewsortcols: true,//easily show what columns are sortable - With this sorting not working.
      caption: jQuery.i18n.prop('userdetail.table.caption'),
      editurl: "edit_user_detail",
      multiselect: false,
      toppager: true, //Toolbar option
      cloneToTop: true, //Toolbar option
      loadComplete: function() {
        this.p.lastSelected = lastSelected; // set this.p.lastSelected - to find out selected data from filter..
      }
    });

    // Navigator tab inside pager grid
    jQuery("#userGrid").jqGrid('navGrid', '#userPager', {
      //General options
      edit: false,
      add: false,
      del: false,
      search: false,
      view: false,
      refresh: false,
      cloneToTop: true //Must for top tool bar - this will close all the pager items in top tool bar.
    }, {
      // edit options
      height: 'auto',
      width: 'auto',
      top: 75,
      left: 350,
      modal: true,
      editCaption: jQuery.i18n.prop('userdetail.table.button.edituser'),
      processData: jQuery.i18n.prop('application.common.message.processing'),
      recreateForm: true,
      bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
      bSubmit: jQuery.i18n.prop('application.common.button.save'),
      reloadAfterSubmit: false,
      closeOnEscape: true,
      //checkOnUpdate:true, //Form Navigation option
      //savekey: [true,13], //Form Navigation option
      //navkeys: [true,38,40], //Form Navigation option
      //checkOnSubmit : true,//Form Navigation option
      closeAfterEdit: true,
      afterSubmit: refreshData // Need to refresh the data in the table to reflect the hashed password back to this table.
    }, {
      //Add options
      height: 'auto',
      width: 'auto',
      top: 75,
      left: 350,
      modal: true,
      addCaption: jQuery.i18n.prop('userdetail.table.button.adduser'),
      processData: jQuery.i18n.prop('application.common.message.processing'),
      recreateForm: true,
      reloadAfterSubmit: false,
      closeAfterAdd: true,
      //checkOnUpdate:true,//Form Navigation option
      //savekey: [true,13], //Form Navigation option
      //navkeys: [true,38,40],//Form Navigation option
      //checkOnSubmit : true,//Form Navigation option
      closeOnEscape: true,
      bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
      bSubmit: jQuery.i18n.prop('application.common.button.save'),
      afterSubmit: refreshData // Need to refresh the data in the table to reflect the primary key added to this table.
    }, {
      // del options
      reloadAfterSubmit: false,
      closeOnEscape: true
    }, {
      //Search options
      multipleSearch: true,
      multipleGroup: true
    }, {
      //View options
      height: 'auto',
      width: 'auto',
      top: 75,
      left: 350,
      viewCaption: jQuery.i18n.prop('userdetail.table.button.viewuser'),
      closeOnEscape: true
    });

    /*Search/Filter toolbar*/
    jQuery("#userGrid").jqGrid('filterToolbar', {
      searchOperators: true,
      searchOnEnter: false,
      jqModal: false,
      multipleSearch: true,
      multipleGroup: true,
      recreateFilter: true,
      closeOnEscape: true,
      overlay: 0,
      stringResult: true
    });

    //Top Toolbar options & Buttons
    //before adding any buttons remove all the items copied/cloned from the bottom pager
    $(".ui-paging-info", userGrid_toppager).remove();
    $("#add_userGrid_top", userGrid_toppager).remove(); //remove add icon from top pager
    $("#edit_userGrid_top", userGrid_toppager).remove(); //remove edit icon from top pager
    $("#del_userGrid_top", userGrid_toppager).remove(); //remove delete icon from top pager
    $("#view_userGrid_top", userGrid_toppager).remove(); //remove view icon from top pager
    $("#search_userGrid_top", userGrid_toppager).remove(); //remove search icon from top pager
    $("#refresh_userGrid_top", userGrid_toppager).remove(); //remove refresh icon from top pager
    $("#userGrid_toppager_center", userGrid_toppager).remove(); //remove center pager details from top pager

    //Toolbar button to add a config
    jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
      caption: jQuery.i18n.prop('userdetail.table.button.adduser'),
      title: jQuery.i18n.prop('userdetail.table.title.add'),
      buttonicon: 'fa-user-plus',
      onClickButton: function() {
        jQuery("#userGrid").jqGrid('editGridRow', "new", {
          //Add options
          height: 'auto',
          width: 'auto',
          top: 75,
          left: 350,
          modal: true,
          addCaption: jQuery.i18n.prop('userdetail.table.button.adduser'),
          processData: jQuery.i18n.prop('application.common.message.processing'),
          recreateForm: true,
          reloadAfterSubmit: false,
          closeOnEscape: true,
          //checkOnUpdate:true,//Form Navigation option
          //savekey: [true,13], //Form Navigation option
          //navkeys: [true,38,40],//Form Navigation option
          //checkOnSubmit : true,//Form Navigation option
          bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
          bSubmit: jQuery.i18n.prop('application.common.button.save'),
          afterSubmit: refreshData, // Need to refresh the data in the table to reflect the primary key added to this table.
          closeAfterAdd: true,
          /*beforeShowForm: function() { //NOT WORKING
                             // "editmodlist"
                             var dlgDiv = $("#editmod" + grid[0].id);
                             var parentDiv = dlgDiv.parent();
                             var dlgWidth = dlgDiv.width();
                             var parentWidth = parentDiv.width();
                             var dlgHeight = dlgDiv.height();
                             var parentHeight = parentDiv.height();
                             // TODO: change parentWidth and parentHeight in case of the grid
                             //       is larger as the browser window
                             dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
                             dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
                          }*/

        });
      }
    });

    //Toolbar button to edit a config
    jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
      caption: jQuery.i18n.prop('userdetail.table.button.edituser'),
      title: jQuery.i18n.prop('userdetail.table.title.edit'),
      buttonicon: 'fa-users',
      onClickButton: function() {
        var gr = jQuery("#userGrid").jqGrid('getGridParam', 'selrow');
        if (gr != null)
          jQuery("#userGrid").jqGrid('editGridRow', gr, {
            //Edit options
            height: 'auto',
            width: 'auto',
            top: 75,
            left: 350,
            modal: true,
            editCaption: jQuery.i18n.prop('userdetail.table.button.edituser'),
            processData: jQuery.i18n.prop('application.common.message.processing'),
            recreateForm: true,
            bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
            bSubmit: jQuery.i18n.prop('application.common.button.save'),
            reloadAfterSubmit: false,
            closeOnEscape: true,
            //checkOnUpdate:true,//Form Navigation option
            //savekey: [true,13], //Form Navigation option
            //navkeys: [true,38,40],//Form Navigation option
            //checkOnSubmit : true,//Form Navigation option
            closeAfterEdit: true,
            afterSubmit: refreshData, // Need to refresh the data in the table to reflect the hashed password
            /*beforeShowForm: function() { //NOT WORKING !!
                               // "editmodlist"
                               var dlgDiv = $("#editmod" + grid[0].id);
                               var parentDiv = dlgDiv.parent();
                               var dlgWidth = dlgDiv.width();
                               var parentWidth = parentDiv.width();
                               var dlgHeight = dlgDiv.height();
                               var parentHeight = parentDiv.height();
                               // TODO: change parentWidth and parentHeight in case of the grid
                               //       is larger as the browser window
                               dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
                               dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
                            }*/
          });
        else {
          $.jgrid.info_dialog.call(
            this,
            jQuery.i18n.prop('userdetail.table.dialog.message.caption'), // dialog title
            jQuery.i18n.prop('userdetail.table.dialog.message.selectrow'), // text inside of dialog
            jQuery.i18n.prop('application.common.button.close') // text in the button
          );
        }
      }
    });

    //Toolbar button to delete a user
    jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
      caption: jQuery.i18n.prop('userdetail.table.button.deleteuser'),
      title: jQuery.i18n.prop('userdetail.table.title.delete'),
      buttonicon: 'fa-user-times',
      onClickButton: function() {
        var gr = jQuery("#userGrid").jqGrid('getGridParam', 'selrow');
        if (gr != null)
          jQuery("#userGrid").jqGrid('delGridRow', gr, {
            reloadAfterSubmit: false,
            closeOnEscape: true
          });
        else {
          $.jgrid.info_dialog.call(
            this,
            jQuery.i18n.prop('userdetail.table.dialog.message.caption'), // dialog title
            jQuery.i18n.prop('userdetail.table.dialog.message.selectrow'), // text inside of dialog
            jQuery.i18n.prop('application.common.button.close') // text in the button
          );
        }
      }
    });

    //Column chooser button in top toolbar
    jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
      caption: jQuery.i18n.prop('application.common.button.columns'),
      title: jQuery.i18n.prop('userdetail.table.title.choosecolumn'),
      buttonicon: 'fa-columns',
      onClickButton: function() {
        jQuery("#userGrid").jqGrid('columnChooser');
      }
    });

    //Button to toggle toolbar search/filter option
    jQuery("#userGrid").jqGrid('navButtonAdd', "#userGrid_toppager", {
      caption: jQuery.i18n.prop('application.common.button.search'),
      title: jQuery.i18n.prop('userdetail.table.title.search'),
      buttonicon: 'fa-toggle-on',
      onClickButton: function() {
        userGrid[0].toggleToolbar();
      }
    });

    //Refresh Button as auto refresh not exists for user detail
    jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
      caption: jQuery.i18n.prop('application.common.button.refresh'),
      title: jQuery.i18n.prop('userdetail.table.title.refreshuserdetail'),
      buttonicon: 'fa fa-cog fa-spin',
      onClickButton: function() {
        refreshData();
      }
    });

    //Frozen columns - NOT needed as of now as no. of columns are limited.
    //jQuery("#userGrid").jqGrid('setFrozenColumns');

    //Grid resize
    jQuery("#userGrid").jqGrid('gridResize', {
      minWidth: 550,
      maxWidth: 1300,
      minHeight: 80,
      maxHeight: 350
    });

    /**
     * Function to refresh the data after a new row inserted in DB. If
     * not then when we update the same row again, because of no primary
     * key reflected in client side, a fresh row will be inserted. Also
     * if we are refreshing the grid, then immediate delete of this row
     * will fail because again primary key(i.e. id) not reflected in the
     * client side
     *
     * NOT SURE IS THERE ANY OTHER BETTER WAY TO DO THIS !!!!
     */
    function refreshData() {
      jQuery("#userGrid").jqGrid("setGridParam", {
        datatype: 'json',
        url: 'list_user_detail',
        page: 1
      }).trigger("reloadGrid");
      return [true, '']; //TO make sure that control goes back to jqGrid inbuild configs like closeafterAdd etc.
    }

    //Username Validation checks !!
    function usernameCheck(value) {
      if (checkLength(value, 6, 50) && checkRegexp(value, /^[a-z]([0-9a-z_.])+$/i)) {
        return [true, "", ""];
      } else {
        return [false, jQuery.i18n.prop('userdetail.validation.message.username'), ""];
      }
    }

    //Password Validation checks !!
    function passwordCheck(value) {
      if (checkLength(value, 6, 60)) {
        return [true, "", ""];
      } else {
        return [false, jQuery.i18n.prop('userdetail.validation.message.password'), ""];
      }
    }

    //Firstname & Lastname Validation checks !!
    function onlyAblhabetCheck(value) {
      if (checkLength(value, 1, 50) && checkRegexp(value, /^[a-z]([a-z ])+$/i)) {
        return [true, "", ""];
      } else {
        return [false, jQuery.i18n.prop('userdetail.validation.message.firstname'), ""];
      }
    }

    //Email Validation checks !!
    function emailCheck(value) {
      if (checkLength(value, 6, 100) && checkRegexp(value, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i)) {
        return [true, "", ""];
      } else {
        return [false, jQuery.i18n.prop('userdetail.validation.message.email'), ""];
      }
    }

    //Birthday Validation checks !!
    function birthdayCheck(value) {
      var now = new Date();
      if (value < now) {
        return [true, "", ""];
      } else {
        return [false, jQuery.i18n.prop('userdetail.validation.message.dob'), ""];
      }
    }

    /*Check length of particular field*/
    function checkLength(o, min, max) {
      if (o.length > max || o.length < min) {
        //o.addClass("ui-state-error");
        return false;
      } else {
        return true;
      }
    }

    /*Check regex/format of particular field*/
    function checkRegexp(o, regexp) {
      if (!(regexp.test(o))) {
        //o.addClass("ui-state-error");
        return false;
      } else {
        return true;
      }
    }


  });

Image attached - with round & question mark..!

Answer 1

You can solve your main problem by adding one line of code:

$("#userGrid_toppager_right").hide();

It hides the right part of the top pager and make the whole top page be used for the toolbar.

Additionally I would recommend you to review your existing code. It could be reduce in more as twice time and could be simplified if you would use more possibilities of free jqGrid. I'll mention below only some suggestions.

• The code at the beginning overloads $.jgrid.from and later in loadComplete set lastSelected parameter of jqGrid. It's not needed in free jqGrid. You cen remove the code and just use built-in lastSelectedData option instead of lastSelected. The option lastSelectedData exist since free jqGrid 4.8 (see the demo from README48)
• You should remove all index properties from all colModel items.
• The code of colModel contains a lot of duplicates. I would recommend you to use column templates. You can either define some local objects and use there are a templates or to define the templates under $.jgrid.cmTemplate The properties of $.jgrid.cmTemplate can be used as string values of template property in colModel. Some common properties (like align: 'center' or editable: true) you can include in cmTemplate option of jqGrid. The option changes the default value of colModel properties and you can remove the duplicates from every colModel items. I would recommend you to read the old answer and the pull request.
• You use many times in your code jQuery("#userGrid") and jQuery.i18n.prop. You should understand that it's expression which will be evaluated every time in your code. It would be practical to introduce variables like var $grid = jQuery("#userGrid"), localeProp = jQuery.i18n.prop; and use the variables in your code. The function refreshData and all onClickButton can use jQuery(this) instead of jQuery("#userGrid").
• Working with pagers and toolbars can be simplified essentially. First of all you can replace pager: "#userPager" to pager: true and remove <div id="userPager"></div> from HTML markup. Free jqGrid will create the div for the page in the same way like it creates the div for top pager.
• You can replace the long call of navGrid to the following:

jQuery("#userGrid").jqGrid('navGrid', '#userGrid_toppager', {
    //General options
    edit: false,
    add: false,
    del: false,
    search: false,
    view: false,
    refresh: false
});

which creates navigator bar only for the top pager.

• the code block where you use $("#...", userGrid_toppager).remove(); can be replaced with one line of code

$("#userGrid_toppager_center,#userGrid_toppager_right").hide();

which hides the right and the middle parts of the top pager.

• I would recommend you to read the wiki article and to use new style of options of form editing and navGrid. You can define navOptions, formEditing, formDeleting, searching as jqGrid parameters which would specify default values from navGrid, editGridRow and so on. If can reduce and simplify the code, make it more readable and easy to maintain.