Freezing Columns with Row Spanning

Question

I am using row spanning in jqgrid as described in the following answer: Jqgrid - grouping row level data

The problem that I am having is once I set a column with the row span on it to frozen = true, the overlay that shows up loses the row spanning so the overlay doesn't cover the entire table and the rows don't line up with the proper data. Is there a way to insure the frozen columns that show up will use the same row span as the original table?

I created an example: http://jsfiddle.net/zmmpaaom/

And because I need to have some code here:

$(function () {
    'use strict';
    var mydata = [
            { id: "1", country: "USA", state: "Texas",      city: "Houston",       attraction: "NASA",               zip: "77058", attr: {country: {rowspan: "5"},    state: {rowspan: "5"}} },
            { id: "2", country: "USA", state: "Texas",      city: "Austin",        attraction: "6th street",         zip: "78704", attr: {country: {display: "none"}, state: {display: "none"}} },
            { id: "3", country: "USA", state: "Texas",      city: "Arlinton",      attraction: "Cowboys Stadium",    zip: "76011", attr: {country: {display: "none"}, state: {display: "none"}} },
            { id: "4", country: "USA", state: "Texas",      city: "Plano",         attraction: "XYZ place",          zip: "54643", attr: {country: {display: "none"}, state: {display: "none"}} },
            { id: "5", country: "USA", state: "Texas",      city: "Dallas",        attraction: "Reunion tower",      zip: "12323", attr: {country: {display: "none"}, state: {display: "none"}} },
            { id: "6", country: "USA", state: "California", city: "Los Angeles",   attraction: "Hollywood",          zip: "65456", attr: {country: {rowspan: "4"},    state: {rowspan: "4"}} },
            { id: "7", country: "USA", state: "California", city: "San Francisco", attraction: "Golden Gate bridge", zip: "94129", attr: {country: {display: "none"}, state: {display: "none"}} },
            { id: "8", country: "USA", state: "California", city: "San Diego",     attraction: "See world",          zip: "56653", attr: {country: {display: "none"}, state: {display: "none"}} },
            { id: "9", country: "USA", state: "California", city: "Anaheim",       attraction: "Disneyworld",        zip: "92802", attr: {country: {display: "none"}, state: {display: "none"}} }
        ],
        arrtSetting = function (rowId, val, rawObject, cm) {
            var attr = rawObject.attr[cm.name], result;
            if (attr.rowspan) {
                result = ' rowspan=' + '"' + attr.rowspan + '"';
            } else if (attr.display) {
                result = ' style="display:' + attr.display + '"';
            }
            return result;
        };

    $("#list").jqGrid({
        datatype: 'local',
        data: mydata,
        colNames: ['Country', 'State', 'City', 'Attraction', 'Zip code'],
        colModel: [
            { name: 'country', width: 70, align: 'center', cellattr: arrtSetting, frozen: true },
            { name: 'state', width: 80, align: 'center', cellattr: arrtSetting, frozen: true },
            { name: 'city', width: 90 },
            { name: 'attraction', width: 120 },
            { name: 'zip', index: 'tax', width: 60, align: 'right' }
        ],
        cmTemplate: {sortable: false},
        width: 250,
    shrinkToFit: false,
        rowNum: 100,
        //rowList: [5, 10, 20],
        //pager: '#pager',
        gridview: true,
        hoverrows: false,
        autoencode: true,
        ignoreCase: true,
        viewrecords: true,
        height: '100%',
        caption: 'Grid with rowSpan attributes',
        beforeSelectRow: function () {
            return false;
        }
    });

    $("#list").jqGrid('setFrozenColumns');
    //$("#pager_left").hide();
});

score 0 · Answer 1 · answered Jul 21 '15 at 12:37

You demo uses old jqGrid 4.6 which have fixed height of rows of frozen columns. There are exist free jqGrid fork of jqGrid (based on jqGrid 4.7) which I develop starting with the end of last year. The version 4.9 includes many modifications of frozen columns. Now the height of every row of the frozen columns will be set separately based on the height of the corresponding row of the main data, so the problem which you described will be automatically fixed.

Simple modification of URLs in the demo which you use (see the wiki) to the following

<link rel="stylesheet" href="//cdn.jsdelivr.net/free-jqgrid/4.9.0/css/ui.jqgrid.css">
<script src="//cdn.jsdelivr.net/free-jqgrid/4.9.0/js/i18n/grid.locale-en.js"></script>
<script src="//cdn.jsdelivr.net/free-jqgrid/4.9.0/js/jquery.jqgrid.min.js"></script>

solves your problem. See the modified demo: http://jsfiddle.net/OlegKi/zmmpaaom/5/

Freezing Columns with Row Spanning

1 Answers1