How to show horizontal scroll bar in jqgrid

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>

回答1:

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.

回答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/

回答3:

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>

回答4:

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

Setting the parameters shrinkToFit and forceFit. For example:

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

and do not using the width parameter.
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}],
Checking the style for .ui-jqgrid .ui-jqgrid-bdiv class has:`

overflow: auto;
Checking the table for the grid does not have a width property.

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

Hope this helps anyone.

回答5:

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

Regards, Jaime

回答6:

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

回答7:

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
    },
    .....