冻结列中的jqGrid错误

Question

I have a grid with the first column frozen. When I move the horizontal scroll, this column in the grid´s header´s is frozen, but in the grid´s body, all the columns can be moved horizontally, the first column isn´t frozen. I´ve gone over my code a hundred of times and it´s fine. I don´t have any other css or javascript in my project, and it´s occurs in IE8, Firefox and Chrome. I´m working with the lastest version of jQgrid.

Here is my code:

jQuery("#single").jqGrid({
                    data : mydata,
                    datatype : "local",
                    height : 115, //Define el alto total del listado
                    width : 650, //Define el ancho total del listado
                    colNames : [ 'Index', 'Date', 'Code', 'Amount' ], //Nombres de las cabeceras de las columnas.
                    colModel : [ {
                        name : 'item_id', // Prop. name del modelo de datos
                        index : 'item_id',
                        width : 100,
                        sorttype : 'int',
                        align: 'center',
                        frozen:true
                    }, {
                        name : 'item_date',
                        index : 'item_date',
                        width : 450,
                        formatter : 'date',
                        formatoptions : {
                            newformat : 'd/M/Y'
                        },
                        datefmt : 'd/M/Y',
                        align: 'center'

                    }, {
                        name : 'item_cd',
                        index : 'item_cd',
                        width : 400
                    }, {
                        name : 'amount',
                        index : 'amount',
                        width : 400,
                        formatter: "integer", //Define el tipo de dato. Imprescindible cuando queremos crear una celda de totales. 
                        align: 'right',     //Alineación del texto dentro de la celda.
                        editrules : {
                            edithidden : true
                        },
                        editoptions : {
                            /*disabled : 'disabled',*/
                            size : '10',
                            maxlength : '8',
                        }
                    } ],
                    rowNum : 10,
                    rowTotal : 2000,
                    rowList : [ 5, 10, 20, 30 ],
                    loadonce : true,
                    mtype : "GET",
                    rownumbers : false, // Mostrar/ocultar el nº de fila.
                    rownumWidth : 40, // Ancho de la columna que muestra el nº de fila.
                    gridview : true,
                    pager : '#psingle', //Id de la capa que contiene el paginador.
                    sortname : 'item_id', // Columna inicial sobre la que realiza la ordenación. ini
                    viewrecords : true, // Muestra/Oculta  el mensaje de: "Mostrando 1 de..." 
                    sortorder : "desc",
                    editurl : './listado.html',
                    caption : "Tabla de datos editables", //Titulo del listado.
                    align: 'center',
                    //shrinkToFit : true,
                    footerrow : true, // Activa el pie del listado. Imprescible si se quiere visualizar.
                    userDataOnFooter : true,
                    edit : {
                        top : '100px',
                        left : '100px',
                        addCaption : "Add Record",
                        editCaption : "Modificar registro",
                        bSubmit : "Modificar",
                        bCancel : "Cancelar",
                        bClose : "Cerrar",
                        saveData : "Data has been changed! Save changes?",
                        bYes : "Yes",
                        bNo : "No",
                        bExit : "Cancel"
                    },
                });

                /* Botones de edición */
                jQuery("#single").jqGrid('navGrid', '#psingle', {
                    del : true,
                    add : true,
                    edit : true
                });

                /* Activa la funcionalidad de las columnas fijas. Se usa en combinación con el atributo "frozen:true"
                    en la columna. */
                jQuery("#single").jqGrid('setFrozenColumns');

Answer 1

The reason of the problem is the bug in setFrozenColumns method of jqGrid. If you fill jqGrid from datatype : "local" or if just the grid is already filled with data before calling of setFrozenColumns the method setFrozenColumns works incorrect. As the workaround you can include the line

jQuery("#single").triggerHandler("jqGridAfterGridComplete");

directly after jQuery("#single").jqGrid('setFrozenColumns'); . I described the problem multiple times. After the post here the bug is fixed in the code of jqGrid on github (see the fix here ). So you can remove the line later if you would use new version of jqGrid (version higher as the current 4.5.2).