Flexigrid - Lightweight but rich data grid

[eluser]skaimauve[/eluser]
condev2008: Thanks! I've made the change.

Another issue: when the table is initialized inside a hidden div, you can't drag the table when it is showed, and if a load error occured while the table was hidden, the table is not dimmed.


This is because the initialization process needs to peek at the position and size of DOM elements such as hDiv in other to define the size and the position of the cDrag and block elements. But when Flexigrid is hidden, some the properties of its DOM are zeroed by the browser.

For example, in the rePosDrag routine, the hDiv.offsetTop is set to 0 when Flexigrid is placed inside a hidden element, and the top of g.cDrag is initialized to 1:

Code:

rePosDrag: function () {

            var cdleft = 0 - this.hDiv.scrollLeft;
            if (this.hDiv.scrollLeft>0) cdleft -= Math.floor(p.cgwidth/2);
            $(g.cDrag).css({top:g.hDiv.offsetTop+1});
            [..]
            },

Same with the fixHeight routine, both bDiv.height and hDiv.height are 0 when Flexigrid is placed inside a hidden element, and all the cDrag get initialized with a zero height.

Code:

fixHeight: function (newH) {
                
                    if (!newH) newH = $(g.bDiv).height();
                    var hdHeight = $(this.hDiv).height();
                    $('div',this.cDrag).each(
                        function ()
                            {
                                $(this).height(newH+hdHeight);
                            }
                    );
                    [...]
            },

The easiest way I found to solve this issue is to attach the following flexShow routine to the onShow callback of the procedure responsible of showing the Flexigrid:

Code:

$.fn.flexShow = function(){
    return this.each(function() {
        if (this.grid) {
            this.grid.fixHeight();
            this.grid.rePosDrag();
        }
    });
}

For example, if you are using the jQuery.tabs pluging, you can initialize it with:

Code:

$('#content').tabs({
     onShow:function(t,s,h){
          $('.flexigrid .bDiv table',s).flexShow();
    }
});