CODEWITHSUNDEEP
jqgrid
chandra
chandra

Reputation: 67

jqgrid, group header columns get mis-aligned on resize

I am using group headers on a set of columns. These seem to work OK as long as I dont' resize the grids. If and when I resize the grid to be smaller than it's actual width the data columns seem to be misaligned and do not line up properly with the column heading. Is there a fix for this.

Thank You

Chandra

Edited to add example and picture.

jQuery("#mbboAbboList").jqGrid('setGroupHeaders', {
    useColSpanStyle: false,
    groupHeaders:[
     {startColumnName: 'mbboInfo.bidSize', numberOfColumns: 4,titleText: '<em>MBBO</em>'},
     {startColumnName: 'abboInfo.bidSize', numberOfColumns: 4, titleText: '<em>ABBO</em>'}
   ]
});

Picture shows difference between normal and mis-aligned columns

Upvotes: 2

Views: 8949

Answers (7)

Yael
Yael

Reputation: 1

In jquery.jqGrid.js file:

setGroupHeaders : function ( o ) { 
.
.
.
change the row
thStyle = { height: '0px', width: ths[i].width+ 'px', display: (cmi.hidden ? 'none' : '')};
to 
thStyle = { height: '0px', width: ths[i].width*0.99+ 'px', display: (cmi.hidden ? 'none' : '')};

Upvotes: -1

Mallek
Mallek

Reputation: 122

I was having the same issue with the headers not lining up in version 4.6 of jQGrid. I was able to fix this by binding to the window resize function a lot like moomoo. I wanted to post this answer as it also has a fix for the re-sizing of columns.

var $this = $(this);

            // Resize helper
            $(window).bind('resize', function () {

                //logic to restyle double headers to be responsive
                if ($this.getGridParam('groupHeader') != null) {
                    var gridId = $this.attr('id');

                    var headerTable = $("#gview_" + gridId + " > div.ui-state-default.ui-jqgrid-hdiv > div > table");

                    headerTable.css('width', 'auto');

                    var objHeader = $("#gview_" + gridId + " > div.ui-state-default.ui-jqgrid-hdiv > div > table tr[role=rowheader] th");

                    for (var i = 0; i < objHeader.length; i++) {
                        var col = $("table[id=" + gridId + "] td[aria-describedby=" + objHeader[i].id + "]");
                        var width = col.outerWidth();

                        $(objHeader[i]).css("min-width", width);
                    }
                }

            }).trigger('resize');


//call the resize function when someone resizes a column on the screen
         $this.jqGrid('setGridParam', {
                resizeStop: function (newwidth, index) {
                    $(window).trigger('resize');
                }
            });

Upvotes: 0

ghost
ghost

Reputation: 1

Check jquery.jqGrid.js file:

setGroupHeaders : function ( o ) { 
.
.
.
$("< th >", {role: 'gridcell'}).css(thStyle).addClass("ui-first-th-"+ts.p.direction).appendTo($firstHeaderRow);

This line comment out.

Upvotes: -1

moomoo
moomoo

Reputation: 906

Here's a more generic workaround. It also solves the issue of jqGrid's not resizing. The following code will resize all jqGrids that are children of elements of class "grid-stretch-container" and will fix the group header problem as well. I did it this way so that I can create a div with class="grid-stretch-container" and with the appropriate stretching styles. The contained jqGrid will resize as the parent div resizes.

$(document).ready(function () {
    // Bind the window resize event.
    // The timer prevents multiple resize events while resizing. 
    // You might want to play with the 20ms delay if you're getting
    // multiple events or noticeable lag.
    var resizeTimer;
    $(window).bind("resize", function () {
             clearTimeout(resizeTimer);
             resizeTimer = setTimeout(resizeApp, 20);
         });

    // Trigger an initial resize so everything looks good on load.
    $(window).trigger("resize");
}

function resizeApp() {
    // Resize all visible jqGrids that are children of ".grid-stretch-container" elements.
    // Note: You should call resizeApp when any grid visibility changes.
    $(".grid-stretch-container:visible .ui-jqgrid-btable").each(function (index) {
        // Resize the grid to it's parent.
        var container = $(this).closest(".grid-stretch-container");
        $(this).jqGrid().setGridWidth(container.width());
        // The grid height does not include the caption, pagers or column headers
        // so we need to compute an offset.
        // There's probably a better method than accessing the jqGrid "gbox".
        var gbox = $(this).closest("#gbox_" + this.id);
        var height = $(this).getGridParam("height") + (container.height() - gbox.height());
        $(this).jqGrid().setGridHeight(height);

        // Destroy and recreate the group headers to work around the bug.
        var groupHeaders = $(this).jqGrid("getGridParam", "groupHeader");
        if (groupHeaders != null) {
            $(this).jqGrid("destroyGroupHeader").jqGrid("setGroupHeaders", groupHeaders);
        }
    });
}

Upvotes: 1

venugopal
venugopal

Reputation: 447

I did as Alvaro said, and that is working..

Here is my code...

In the window resize event, 

     $("#grid").jqGrid('destroyGroupHeader');
     if($('#grid_container').attr("id")!==undefined)
         $("#grid").setGridWidth($('#grid_container')[0].offsetWidth,true);
     grid_reconstruct_GroupHeaders();

The grid_container is a div in which my grid is present, I am taking offsetwidth as the remaining elements' widths are in percentages.

and my grid_reconstruct_GroupHeaders() function looks like....

$("#grid").jqGrid('setGroupHeaders', {
      useColSpanStyle: false, 
      groupHeaders:[
        {startColumnName: 'organisation', numberOfColumns: 1, titleText: '<span>Order/Ready Completion</span>'},
        {startColumnName: 'Order', numberOfColumns: 12, titleText: '<span>Manual Queue</span>'},
        {startColumnName: 'Process', numberOfColumns: 1, titleText: '<span>Automated Queue</span>'},
        {startColumnName: 'Total', numberOfColumns: 1, titleText: '<span>TOTAL</span>'}
      ] 
    });

Upvotes: 1

Alvaro
Alvaro

Reputation: 51

I just had teh same issue, what I ended up doing to work around this was to destroy the headers when the page is resizing, then reloading them again once the page has been resized. The headers are then properly aligned

Upvotes: 5

Ian
Ian

Reputation: 181

I have exactly the same problem, after some tests, I found jqgrid is not compatible with jquery 1.8 (i assume you are using that version)

when i use jquery 1.7.2 and the issue is disappeared.

Upvotes: 0

Related Questions