Bug on mouse-interaction when using more than 2 instances of flexigrid on jquery ui tabs.

[GoogleCodeExporter]

First of all, I want to thank to the creator and the colaborators of this 
awesome grid. It was my chosen one among 15 full-tested ones.

What steps will reproduce the problem?
1. Generate multiple flexigrid instances on jquery ui tabs (1 instance for each 
tab)

What is the expected output? What do you see instead?

All the flexigrid's rendered and working fine as I had rendered a single one. 
1st and 2nd tabs works fine, but after the 3rd tab, the mouse won't interact in 
some features. 

Features that work are:
- Filter button is ok
- Sort when mouse over a column is ok
- Dragging a column is ok

Features that DON'T work are:
- You cannot resize a column
- when you sort or refresh the grid, the <div> that puts a 50% opacity over the 
grid won't work
- The dropdown to hide a column doesn't work

AFTER you use a feature that work once, all the features became ok.

What version of the product are you using? On what operating system?
- Using flexigrid 1.1
- Tested on apache web server in Centos 5.3 and Windows 7 
- Tested browsers were latest Firefox and Google Chrome (I just don't 
bother/care/use and develop on/to Internet Explorer, its the first thing I tell 
to any customer)

Please provide any additional information below.

Just to example, I have this picture http://twitpic.com/5uut6d/full .
The tabs Processos and Concursos are ok on mouse-interaction, but all the 
others have the mentioned bug.

If that helps, and if this bug worthes to be solved, I can try to provide an 
live example.

Original issue reported on code.google.com by Vormav...@gmail.com on 24 Jul 2011 at 2:36

[GoogleCodeExporter]

Inspecting the code here, I found out why it happens, and came up with an idea 
to solve it.

While flexigrid generate the <div>s, for some reason, it doesnt set cDrag, if 
the <table> is not visible. So what I did was to force navigation in the tab, 
to make at least the header visible, then the mouse will interact when over the 
head (but not in the normal rows, because the data won't be populated fast 
enough, unless I delay the change a bit, what I dont want, to make the user to 
wait more time for that search)

for (i=0; i<tabs.total; i++) {
    div = '.'+tabs.table[i];

    var colmodel = 
        $.ajax({                
            url       : 'getcolmodel.php',
            async: false, 
            data      : 'id='+tabs.profile[i],
            dataType  : 'json'}).responseText;          

    var cmodel = eval(colmodel);

    $(div).flexigrid({              
        url: 'profile_search.php?text='+Search+'&id_profile='+tabs.profile[i],
        dataType: 'json',

        colModel : cmodel,
        searchitems : [
            {display: 'Filter all fields', name : 'name', isdefault: true}                  
            ],
        sortname: "id",
        sortorder: "asc",
        usepager: true,
        title: tabs.title[i],
        useRp: true,
        rp: 50,
        showTableToggleBtn: true,
        width: $(window).width()-40,
        height: $(window).height()-400,
        singleSelect: true,
        showToggleBtn: true 
    });         
    $('#gridtab').tabs( "select" , i); // Change the tab so flexigrid will be visible while its being rendered

}

$('#gridtab').tabs( "select" , 0); // back to the first tab

Original comment by Vormav...@gmail.com on 27 Jul 2011 at 8:05

• Added labels: ****
• Removed labels: ****