How to show horizontal scroll bar in jqgrid

Question

I have a wide jqgrid that I have narrowed by mean of the width property. When I used that, no horizontal scroll bar appears. How can I show it?

Any help will be greatly appreciated,

Thanks

Jaime

EDIT:

This is the current JS code I have. Scrollbar is still not shown:

<script type="text/javascript">
$(function () {
    $("#personal").jqGrid({
        url: "@Url.Action("List")",
        datatype: "json",
        mtype: "GET",
        colNames: ["Departamento",
                   "Nombres",
                   "Apellido Paterno",
                   "Apellido Materno",
                   "RUT",
                   "Contraseña",
                   "Fecha Nacimiento",
                   "Fotografía",
                   "Estado Civil",
                   "Género",
                   "Dirección",
                   "Cargo",
                   "E-mail",
                   "Fecha Ingreso",
                   "Creación",
                   "Modificación",
                   " "],
        colModel: [
            { name: "departamento", index: "dep_nombre", editable: true, edittype: "select", editoptions: { width: 100, dataUrl: "@Url.Action("GetDepartments","Departamento")" }, width: 250, editrules: { required: true } },
            { name: "per_nombres", index: "per_nombres", editable: true, width: 250, editoptions: { maxlength: 80, size: 32 }, editrules:{ required:true } },
            { name: "per_apellido_paterno", index: "per_apellido_paterno", editable: true, width: 250, editoptions: { maxlength: 80, size: 32 }, editrules: { required: true } },
            { name: "per_apellido_materno", index: "per_apellido_materno", editable: true, width: 250, editoptions: { maxlength: 80, size: 32 } },
            { name: "per_dni", index: "per_dni", editable: true, width: 100, editoptions: { maxlength: 20, size: 17 }, editrules: { required: true } },
            { name: "per_contrasena", editable: true, width: 100, editoptions: { maxlength: 50, size: 17 }, editrules: { required: false } },
            { name: "per_fecha_nacimiento", index: "per_fecha_nacimiento", editable: true, width: 100, editrules: { date: true }, formatter: 'date', formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: { size: 17, dataInit: function (el) { $(el).datepicker({ dateFormat: 'dd-mm-yy' }); } }, },
            { name: "per_fotografia", index: "per_fotografia", editable: true, width: 250, edittype: "file", editoptions: { maxlength: 255, size: 32 } },
            { name: "per_estado_civil", index: "per_estado_civil", editable: true, edittype: "select", editoptions: { value: "S:Soltero; C:Casado; V:Viudo; D:Divorciado" }, width: 100 },
            { name: "per_sexo", index: "per_sexo", editable: true, edittype: "select", editoptions: { value: "M:Masculino; F:Femenino" }, width: 100 },
            { name: "per_direccion", index: "per_direccion", editable: true, width: 250, editoptions: { maxlength: 512, size: 32 } },
            { name: "per_cargo", index: "per_cargo", editable: true, width: 100, editoptions: { maxlength: 50, size: 32 } },
            { name: "per_email", index: "per_email", editable: true, width: 100, editoptions: { maxlength: 80, size: 32 }, editrules: { email: true } },
            { name: "per_fecha_ingreso", index: "per_fecha_ingreso", editable: true, width: 100, editrules: { date: true }, formatter: 'date', formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: { size: 17, dataInit: function (el) { $(el).datepicker({ dateFormat: 'dd-mm-yy' }); } }, },
            { name: "per_creado_el", index: "per_creado_el", editable:false, search:false, width: 100, align: "center", formatter: "date" },
            { name: "per_modificado_el", index: "per_modificado_el", editable:false, search:false, width: 100, align: "center", formatter: "date" },
            { name: 'acciones', width: 58, fixed: true, sortable: false, resize: false, search:false, formatter: 'actions', formatoptions: { keys: true } }
        ],
        jsonReader: {
            repeatitems: false,
            id: "per_id"
        },
        pager: "#pager",
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: "per_apellido_paterno",
        sortorder: "asc",
        viewrecords: true,
        gridview: true,
        autoencode: true,
        multiselect: true,
        shrinkToFit: false,
        caption: "Funcionarios",
        editurl: "@Url.Action("AjaxEdit")",
        height: '100%',
        width: 935,
        rownumbers: true,
        rownumWidth: 40            
    });

    $("#personal").jqGrid('hideCol', ["per_contrasena", "per_fotografia", "per_direccion"]);
    $("#personal").jqGrid('navGrid', '#pager', { edit: false, add: true, del: true, search: false }, { width: 500 }, { width: 500 }, {}, { multipleSearch: false, multipleGroup: false });
    $("#personal").jqGrid('filterToolbar', { searchOperators: false });

    $.jgrid.edit.addCaption = "Agregar Funcionario o Visita";
    $.jgrid.edit.editCaption = "Modificar Funcionario o Visita";
    $.jgrid.edit.saveData = "¡El funcionario fue modificado! ¿Almacena los cambios?";

    $.jgrid.formatter.date.newformat = 'd-m-Y H:i';
}); 
</script>

Answer 1

You can try like below:

$('#grid_table').jqGrid({
    .....
    colModel: [
            // you can also set width for individual columns
            { name: "user_name", align:"center", width: "200"},
    .....
    .....

    shrinkToFit: false,
    .....

    gridComplete: function()
    {
     $('#grid_table').jqGrid('setGridWidth', '1000'); // max width for grid
    },
    .....

Answer 2

just add

 shrinkToFit : false,

It made the table layout to fixed grow as per the cell size doesn't get shrink as per table's parent width/

Answer 3

The horizontal scrollbar works great for me with the following conditions:

1. Setting the parameters shrinkToFit and forceFit. For example:

   $('#gridObtenerRegistros').jqGrid({ shrinkToFit:false, forceFit:true,

   and do not using the width parameter.

2. Setting the width property within the colmodel. Example:

   colModel:[ {name:'numEmpleadoCliente',index:'numEmpleadoCliente', width:80, sortable: false, resizable: false}, {name:'nombre',index:'nombre', width:215, sortable: false, resizable: false}, {name:'estatus',index:'estatus', width:50, sortable: false, resizable: false}],

3. Checking the style for .ui-jqgrid .ui-jqgrid-bdiv class has:`

   overflow: auto;

4. Checking the table for the grid does not have a width property.

   In my example: <table id="gridBusquedaRegistros"></table>

Hope this helps anyone.

Answer 4

Finally it was because no data were displayed in the grid. When the grid returns data.the horizontal scrollbar appears.

Regards, Jaime

Answer 5

Probably you have some other CSS defined on the page which make problems. The demo which just uses your code do displays horizontal scrollbars.

Answer 6

Adding a div with some width and overflow:auto around the table should do the trick.

<div style="width:100px;overflow:auto;"><table id="personal"></table><div>

Answer 7

Without any code, some things you'll need to look at...

Do not use autowidth and make sure you are not using shrinkToFit (it needs to be set to false). Other than that, the horizontal scrollbar should appear with just those two changes. In addition to this, you should also make sure you set the width explicitly for each column within the column model.