jqueryhtmlcssjqgridfrozen-columns

Can't get JQgrid 4.5.2 frozen columns to work properly -- only headers are moving

I already tried to fix it myself by reading some other questions like this one => why doesn't Jqgrid frozen column seem to work with filter rows and filter heading?

but i gues the grid has changed since then because i am not able to call the complete method (or i'm doing something wrong).

So right now only a copy of the headers are moving and not the data, the height of the headers isn't correct neither but i presume that's because i rotate the headers and adjust the height afterwards in javascript. It is pretty out of the box except for rotating the headers but without it its not working neither :(

I made a clean code example so helping will be a bit easier, in my situation i also use some custom code to rotate my headers but even without it the frozen columns are not working.

any help will be much appreciated :)

The Html

<html>
<head>
    <title>Jqgridtest</title>
    <link rel="stylesheet" type="text/css" media="screen" href="styles/jquery-ui/jquery-ui-1.10.3.custom.css" />
    <link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" type="text/css" />  
     <link rel="stylesheet" href="styles/demo.css" type="text/css" />  
    <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>   
    <script src="jqgrid/js/i18n/grid.locale-nl.js" type="text/javascript"></script>
   <script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="scripts/generatedata.js"></script>    

</head>
<body>
    <div>
        <table id="jqgrid">

        </table>
    </div>
</body>
</html>

The generatedata javascript with correct dataloading + fixed headers

$(document).ready(function() {
    processDataToGrid('#jqgrid') ;
});


function getInternetExplorerVersion()
// Returns the version of Windows Internet Explorer or a -1
// (indicating the use of another browser).
{
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer') {
        var ua = navigator.userAgent;
        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat(RegExp.$1);
    }
    return rv;
}

var fixPositionsOfFrozenDivs = function () {
    var $rows;
    if (typeof this.grid.fbDiv !== "undefined") {
        $rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
        $('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
            var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
            if ($(this).hasClass("jqgrow")) {
                $(this).height(rowHight);
                rowHightFrozen = $(this).height();
                if (rowHight !== rowHightFrozen) {
                    $(this).height(rowHight + (rowHight - rowHightFrozen));
                }
            }
        });
        $(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
        $(this.grid.fbDiv).css($(this.grid.bDiv).position());
    }
    if (typeof this.grid.fhDiv !== "undefined") {
        $rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
        $('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
            var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
            $(this).height(rowHight);
            rowHightFrozen = $(this).height();
            if (rowHight !== rowHightFrozen) {
                $(this).height(rowHight + (rowHight - rowHightFrozen));
            }
        });
        $(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
        $(this.grid.fhDiv).css($(this.grid.hDiv).position());
    }
};



function processDataToGrid(gridId) {

    var data = [ 
    {id:1, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:2, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:3, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: true, x14 : false, x15:true  } ,
    {id:4, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:5, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: true, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:6, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:false, x13: false, x14 : false, x15:true  } ,
    {id:7, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:8, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:9, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: true, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:10, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:11, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:12, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: true, x14 : false, x15:true  } ,
    {id:13, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:14, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:15, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:false, x13: false, x14 : false, x15:true  } ,
    {id:16, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true  } ,
    {id:17, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:18, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:19, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: true, x3:false, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:20, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:21, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:22, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:false, x13: false, x14 : false, x15:true  } ,
    {id:23, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true  } ,
    {id:24, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:25, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:26, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:27, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:28, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:29, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true  } ,
    {id:30, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:31, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:32, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:33, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:34, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:35, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:36, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:37, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:38, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:39, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:40, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: true, x14 : true, x15:true  } ,
    {id:41, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true  } ,
    {id:42, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true  } ,
    ];



    $(gridId).jqGrid({
        datatype: "local",
        gridview: true,
        forcefit: false,
        data:data,
        shrinkToFit: false,
        width: 780,
        height: 400,
        rowNum: 100,
        columnsheight: 150,
        colNames: ['Fixed1', 'Fixed2' ,'Col1', 'Col2', 'Col3' ,  'Col4', 'Col5','Col6', 'col7', 'Col8', 'Col9', 'Col10',  'Col11',  'Col12', 'Col13', 'Col4', 'Col15'  ],
        ignoreCase: true,
        colModel: [
        { name: 'fixed1', sorttype: 'text', search:true, width:300, align: 'left', frozen : true ,sortable:false },
        { name: 'fixed2', sorttype: 'text', search: true, width: 130, align: 'left', frozen: true, sortable: false },
        { name: 'x1', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x2', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x3', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x4', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x5', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x6', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x7', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x8', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x9', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x10', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x11', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x12', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x13', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x14', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },
        { name: 'x15', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false },


        ]
    });



    //enable group headers
    $(gridId).jqGrid('setGroupHeaders', {
        groupHeaders: [
    { startColumnName: 'x1', numberOfColumns: 10, titleText: 'TopHeader1' },
    { startColumnName: 'x10', numberOfColumns: 3, titleText: 'TopHeader2' },
    { startColumnName: 'x13', numberOfColumns: 1, titleText: 'TopHeader3' }
  ]
    });

    $(gridId).jqGrid('setGroupHeaders', {

        groupHeaders: [
    { startColumnName: 'x1', numberOfColumns: 7, titleText: 'SubHeader1' },
    { startColumnName: 'x8', numberOfColumns: 2, titleText: '' },
    { startColumnName: 'x10', numberOfColumns: 6, titleText: 'Subheader2' },
  ]
    });

    $(gridId).jqGrid('setFrozenColumns');


   RotateColumnHeaders($(gridId), 150, 100);
    //enable search and contains searchmethod
    $(gridId).jqGrid('filterToolbar', { searchOnEnter: false, defaultSearch: 'cn' });
        $(gridId).triggerHandler("jqGridAfterGridComplete");
    fixPositionsOfFrozenDivs.call($(gridId)[0]);
}


// Rotates the (x1-x24) columnheaders  90 degrees
var RotateColumnHeaders = function (grid, headerHeight, headerWidth) {
    var trHead = $("thead:first tr")[3];
    var cm = grid.getGridParam("colModel");

    $("th", trHead).height(headerHeight);

    for (var iCol = 0; iCol < cm.length; iCol++) {
        var cmi = cm[iCol];
        //check if name starts with x because our modelnames that should be rotated start with x as well    
        if (cmi.name.match("^x")) {
            var headDiv = $("th:eq(" + iCol + ") div", trHead);
            headDiv.addClass("VerticalHeader");
            headDiv.css("overflow", "initial");
            var ieVersion = getInternetExplorerVersion();
            if (ieVersion != -1 && ieVersion <= 9) {
                headDiv.addClass("VerticalHeaderIE");
                //set height to prevent text clipping
                headDiv.height(23);
                //set background color of parent since background color of child element has been set so the text is readable
                //and the parent color is different = very ugly so set parent color 
                headDiv.parent().css("background", "#EDEDED");
            }
        }
    }

};


function boolFormatter(cellvalue, options, rowObject) {

            if (cellvalue == "*") {
                return '<span class="BoolCell Talks">*</span>'; /* null*/
            }
            else if (cellvalue) {
                return '<span class="BoolCell Allowed">&#x25CF;</span>'; /* true */
            }
            else {
                return '<span class="BoolCell NotAllowed">-</span>'; /* false */
            }

    return new_format_value
}

my custom css to rotate the headers

.VerticalHeader
{
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);  
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    margin-top:-40px;
    position: relative;
    font-size: 0.8em;

}

.VerticalHeaderIE  /* _EXTRA_ style voor VerticalHeader in IE */
{
    text-align:left;
    width:150px;
    height:50px;
    margin-top:-40px;
    margin-left: 20px;
    background-color: #EDEDED;

    zoom: 1;
}
Solution

  • I recommend you to include the line

    $(gridId).triggerHandler("jqGridAfterGridComplete");

    after the line $(gridId).jqGrid('setFrozenColumns');. See my bug report with the corresponding suggestions here for more information. By the way the corresponding post 4.5.2 fix is already in the main code jqGrid (see here). So the problem should be fixed in the next version of jqGrid.

    Additional remark to your code: please don't use addRowData in the loop to fill grid having datatype: "local". Instead of that you can set additional id property to every item of data array and use data: data option of jqGrid. It allows you to create jqGrid with the data. If you use gridview: true option then such kind of filling of the grid will be much more effective. See the answer for more details.