Flexigrid inside jQuery UI Tabs?

[batfastad]

Hi everyone
Just wondering if anyone's had any success with running flexigrids
within jQuery UI's tabs widget?
I'd like to add this feature to our intranet database system, multiple
tabs each with different grids of data.

Anyone done this?

I've got a demo up and running here... http://thenetzone.co.uk/demo/
It's the final 'Contacts' tab where I'm looking to have the grid, and
that tab is set to load the content through Ajax from
http://thenetzone.co.uk/demo/contacts_grid.php
Then at the end of that Ajax content, I run the $('.flexme1').flexigrid
({striped:false}); script to style up that content.

It seems to work in FF3, but not in IE7
However the standalone example (without tabs) works fine in IE7
http://thenetzone.co.uk/demo/contacts_grid.php

Anyone know if/how I can get this working in IE7?

Thanks, Ben

[Carl Von Stetten]

Ben,

I'm using Flexigrid within a multi-tabbed interface (jQuery ui) on an
intranet application. I have multiple Flexigrid tables on different
tabs, all using AJAX to load the content. The only difference I can see
is that I'm not loading the table then applying Flexigrid - I'm using
Flexigrid's own data loading feature to request the table data in JSON
format.

I tested your page in IE7 and it seems to work fine. What problem are
you seeing?

Carl

[batfastad]

Ok that's excellent news that it's possible!
Well I've left it for a bit clicked the tab again and it loaded fine
in IE7 - strange! So this thread is solved anyway. Stupid IE and it's
random caching ways.

I agree with you, it's probably easier if I load the data from JSON so
in my live system that's what I'll probably do.

So to do that, I guess I need to set the tabs up as DIVs within the
document, rather than using the Tab's ajax to load anything.
But how do I tell flexigrid what JSON source to load depending on what
tab is activated?

Thanks, B

On Jan 15, 5:22 pm, Carl Von Stetten <vonner.li...@vonner.net> wrote:
> Ben,
>
> I'm using Flexigrid within a multi-tabbed interface (jQuery ui) on an
> intranet application.  I have multiple Flexigrid tables on different
> tabs, all using AJAX to load the content.  The only difference I can see
> is that I'm not loading the table then applying Flexigrid - I'm using
> Flexigrid's own data loading feature to request the table data in JSON
> format.
>
> I tested your page in IE7 and it seems to work fine.  What problem are
> you seeing?
>
> Carl
>
>
>
> batfastad wrote:
> > Hi everyone
> > Just wondering if anyone's had any success with running flexigrids
> > within jQuery UI's tabs widget?
> > I'd like to add this feature to our intranet database system, multiple
> > tabs each with different grids of data.
>
> > Anyone done this?
>

> > I've got a demo up and running here...http://thenetzone.co.uk/demo/

> > It's the final 'Contacts' tab where I'm looking to have the grid, and
> > that tab is set to load the content through Ajax from
> >http://thenetzone.co.uk/demo/contacts_grid.php
> > Then at the end of that Ajax content, I run the $('.flexme1').flexigrid
> > ({striped:false}); script to style up that content.
>
> > It seems to work in FF3, but not in IE7
> > However the standalone example (without tabs) works fine in IE7
> >http://thenetzone.co.uk/demo/contacts_grid.php
>
> > Anyone know if/how I can get this working in IE7?
>

> > Thanks, Ben- Hide quoted text -
>
> - Show quoted text -

[Carl Von Stetten]

Ben,

Is the contacts table always going to show all the records in the database?  If so, I'd just have Flexigrid load the table on document.ready.  The flexigrid sample pages that come in the download show how to set it up.  It also provides answers to the questions you raised in your other thread.

HTH,
Carl

[batfastad]

Hi Carl
I'll probably go with the JSON option so I may as well implement
paging, every 50 records or so.

But there will be other tabs that I want to have flexigrid on, with
similar size datasets.
6-11 tabs, with 30-50 records for each by default.
I'd like to make sure the JSON data is only loaded when that tab is
activated, and limit the amount of data loaded on page load

Is it possible?

Cheers, B

> >> - Show quoted text -- Hide quoted text -

[Carl Von Stetten]

Ben,

The UI Tabs has a Select option that you can assign a function (see the UI Tabs docs for details).   Your function could check which tab is selected, and based on which is selected, load the appropriate Flexigrid table.  You might also check to see if the table has already been loaded into the selected tab, and only load the table if it isn't already loaded.

HTH,
Carl

[batfastad]

Hi Carl
Ok I'm struggling with this, I'm very new to jQuery and I can't seem
to get the currently selected tab. My only JS knowledge is simple form
validation stuff.

I'm trying to get the id of the tab that's selected, and perform a
function.
At the moment I'm just trying to log the id of the current tab to the
console...

// TABS BAR
$('#tabs').tabs();

$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {

var $tabs = $('#tabs').tabs();
var selected = $tabs.data('selected.tabs');

// Objects available in the function context:
ui.options // options used to intialize this widget
ui.tab // anchor element of the selected (clicked) tab
ui.panel // element, that contains the selected/clicked tab
contents
ui.index // zero-based index of the selected (clicked) tab

console.log(selected);
});
But I'm really not sure on where the different language constructs
need to go to get this working. I've copied and modified stuff off the
Tabs wiki pages, obviously the above is within the document.ready

Then instead of console.log() I'll do an if block and work out what
remote flexigrid to load

Is there any help you can give?

Thanks, Ben

[Carl Von Stetten]

Ben,

I would suggest that you post any questions about interacting with the UI Tabs widget to the jQuery-UI Google group.  There's a lot of very smart and experienced people that can assist you with Tabs questions.

[Sven]

Did you notice that the column selection box is on the left side of
the grid control? And that resizing of the columns isn't possible
anymore?

The cause of this issue is that the grid is invisible during at
construction time; When it is created it does some measurements of the
elements, and the values are not correct until the grid is
displayed...
I've solved this by modifying the code and adding a recalcLayout
function to the grid code. When the grid is displayed I call this
function, and everything (or at least I think everything) turns up
right!

If anybody has a better solution to this, please let me know!

recalcLayout: function() {
g.toggleCol(0, !$('nDiv', this).find('input:eq[0]').val());

var cdheight = $(g.bDiv).height();
var hdheight = $(g.hDiv).height();
$(g.cDrag).css({top: -hdheight + 'px'});

$('div',g.cDrag).each (
function()
{
$(this).css({height: cdheight + hdheight})
}
);
},

Sven

[doug...@gmail.com]

thanks for the code Sven, though i'm having some trouble implementing
it. Can you provide a little more detail on exactly where to place
that function and where to call it?

[Sven]

I placed it (actually at random) between the fixHeight and dragStart
functions.

If you want to access the function from your the javascript part in
your html file, you should also add the function "public". This can be
done by writing a $.fn.* wrapper:
$.fn.recalcLayout = function() { // function to recalculate the
layout (refresh)
return this.each( function() {
if (this.grid) this.grid.recalcLayout();
});
}; //end recalcLayout

When to call it?
Just after Jquery showed the tab, so the grid should be visible BEFORE
calling the recalcLayout function.

Sven


On Jan 15, 11:42 pm, "doug.3...@gmail.com" <doug.3...@gmail.com>
wrote:

[doug...@gmail.com]

you the man Sven, that worked, thanks. i was also reading through the
jquery UI tabs FAQ and found another solution to the problem that just
takes editing a couple lines of css. here's what it said:

Any component that requires some dimensional computation for its
initialization won't work in a hidden tab, because the tab panel
itself is hidden via display: none so that any elements inside won't
report their actual width and height (0 in most browsers).

There's an easy workaround. Use the off-left technique for hiding
inactive tab panels. E.g. in your style sheet replace the rule for the
class selector ".ui-tabs-hide" with

.ui-tabs-hide {
position: absolute;
left: -10000px;
}

For Google maps you can also resize the map once the tab is displayed
like this:

$('.ui-tabs-nav').bind('tabsshow', function(event, ui) {
if(ui.panel.id == "map-tab") { resizeMap(); }
});

resizeMap() will call Google Maps' checkResize() on the particular
map.


Doug

[doug...@gmail.com]

Hey Sven,

i was mistaken ealier when i thought i had implemented your code
properly. that CSS 'fix' that i found also causes a huge scroll at the
bottom of the page so i am no longer using that. i'm getting the error
'recalcLayout is not defined'. I'm not sure where/how you are calling
the function. Currently i have:

$('.ui-tabs-nav').bind('tabsshow', function(event, ui) {

recalcLayout();
});

in the $(document).ready(function() of my HTML page. Is there a better
place to call it from within flexigrid.js? binding the 'tabsshow'
function causes the page to jump to the anchor of the ui tab, which is
not desired. Also, i wasn't sure what to do with that public function
you provided above since i am calling it from the HTML page. Sorry to
be a pain, i'm new to this and pretty stumped. Thanks.

Doug

On Jan 16, 12:06 am, Sven <sven.rymena...@gmail.com> wrote:

[Sven]

Like all jQuery calls you need to use '$', in other words: $
('#flex').recalcLayout();

Sven

[batfastad]

Hi guys

Right just to let you know I've now got a JSON grid running happily
inside the UI tabs
The flexigrid gets initialised when the user switches to that tab,
here's the code to complete the topic:

// TABS BAR
$('#tabs').tabs({

select: function(event, ui) {
switch (ui.index) {
case 0:
// first tab selected, do something
break;
case 1:
// second tab selected, do something
$('#contacts_grid').flexigrid();
}
}
});

Cheers, B

[doug...@gmail.com]

thanks ben, that seems like a much better way to do it. I've
implemented the case switch on the tabs with the flexigrid inside the
appropriate case, but i'm still not getting the column resize and the
column show/hide toggle is on the far left side of the table. are you
seeing similar results?

doug

[batfastad]

On Jan 21, 4:46 pm, "doug.3...@gmail.com" <doug.3...@gmail.com> wrote:
> thanks ben, that seems like a much better way to do it. I've
> implemented the case switch on the tabs with the flexigrid inside the
> appropriate case, but i'm still not getting the column resize and the
> column show/hide toggle is on the far left side of the table. are you
> seeing similar results?
>
> doug

Hi doug
Sounds the same, the column resize doesn't appear and the column
picker is over the left.
As it goes I want to completely remove the column picker from my grid,
it's of no benefit to me in this particular project
I will actually be trying Sven's code shortly, now I've got it
working. But I'm having unrelated issues with IE7 and my JSON that I
need to solve first

Thanks, B

[Jay]

I'm having the same issue where column resize doesn't show. My guess
is it has something to do with the grid being built, and the resize is
created at the time its built, but since its hidden, it has nothing to
calculate to created the resizers. I'm gonna try something where it
basically tells the grid to do the resize builder when a tab is
clicked for the first time. We'll see how that works.

[Sven]

Jay,

try my sample code... It does what you want to do.

Call the recalcLayout function when your tab is clicked.

Sven