jqGrid error in frozen columns

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');

score 0 · Accepted Answer · answered Sep 26 '13 at 11:11

0

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).

answered Sep 26 '13 at 11:11

Oleg

220,925
34
403
798

Thank you very much!!!! I´ve been looking for something to fix this issue, but never found this answer and I was very worried about it. Sincerenly, thank you very much. – cescari Sep 26 '13 at 14:10
Is there any possibilities to last column as frozen column in jqGrid? @Oleg – CJ Ramki Dec 25 '14 at 05:33
here is that question link. sorry to post that question link here. http://stackoverflow.com/questions/27549268/jqgrid-frozen-column-freezing-column-to-right-end-of-the-grid @Oleg – CJ Ramki Dec 25 '14 at 05:44

jqGrid error in frozen columns

1 Answers1