Consistent grid headers with Flexigrid ?

Question

So I\'m trying to use the flexigrid plugin. It looks like it\'s going to work great aside from the fact that it looks like you have to manually set the column widths. Otherwis

Answer 1

I know this will come as odd to some, but I was having the same problem and once I rearranged my layout (the whole page, not the grid itself) everything was fine.

I had a 3-column fluid layout. I moved the grid to the very top of the page, right after the body tag, and it lined up perfectly! Wow...

Answer 2

I've gotten this to work (at least partially). The problem I was having with my previous iteration (which was also a problem with tvanfosson's implementation) was that once you resized the headers, then the "drag" bars would not be aligned with the new column widths.

My current implementation is below, which works in Firefox 3.5 and Chrome. Unfortunately, there is some exception being thrown in IE (all versions) that is rather disconcerting. I will debug further on Monday:

$(".flexigrid").each(function() {
    var grid = $(this);
    var headers = grid.find(".hDiv thead th");
    var row = grid.find(".bDiv tbody tr:first");
    var drags = grid.find("div.cDrag div");
    if (row.length >= 1) {
        var cells = row.find("td");
        var offsetAccumulator = 0;
        headers.each(function(i) {
            var headerWidth = $(this).width();
            var bodyWidth = cells.eq(i).width();
            var realWidth = bodyWidth > headerWidth ? bodyWidth : headerWidth;

            $(this).width(realWidth);
            cells.eq(i).width(realWidth);

            var drag = drags.eq(i);
            var dragPos = drag.position();
            var offset = (realWidth - headerWidth);
            var newPos = dragPos.left + offset + offsetAccumulator;
            offsetAccumulator += offset;
            drag.css("left", newPos);
        });
    }
});

Answer 3

Found this elsewhere:

Figured it out - for anyone with a similar problem: I had it assigned to a <div id="mygrid">, when I assigned it to a <table id="mygrid"> everything worked great!

http://markmail.org/message/kibcuxu3kme2d2e7

Answer 4

This one worked for me:

    onSuccess : function(){
         $('#flex1 > tbody').wrap('<table cellpadding="0" cellspacing="0" />');
    },

Add this to the flexgrid construction options. flex1 is your flexgrid div id.

Moshe.

Answer 5

Similar issue for me. Have a page with 3 tabs, each with a flexigrid. Only one of the tabs had issue where header cell was somehow shorter than the data cells underneath of it. Which also threww off the alignment of all the header cells following that one.

.. what I figured out by inspecting the rendered elements using Chrome's CTRL+SHIFT+J functionality and inspecting down inside the <div class="hDiv" element... eventually finding the <th abbr="MyColumnName"field... was that the width: <nnn>pxpart wasn't even there!

Went back and inspected where I was defining colModel and noticed for just that one column... instead of width: <MyWidthValueHere>, I had inadvertently typed Width: <MyWidthValueHere>, instead (First letter caps vs all lowercase). It was such a subtle difference my eyes weren't catching it when initially scrutinizing and compare/contrasting the tabs that worked against this one that had the issue.

Answer 6

Thanks. Based on the post of line 678, mine got fixed with the following:

$(tdDiv).css({textAlign:pth.align,width: $('div:first',pth).width()-10 + "px"});

For some reason, the header font is larger than the detail font... hope this helps.