Flexigrid in Wordpress

[GT]

Hi there folks,

Congrats to Paolo on flexigrid - it's a terrific jQuery tool.

I got it working perfectly with JSON in a standalone page (an example
is at http://www.marketmentat.com/WIP/testflex1.php ) ... but when I
try to integrate the same logic into a Wordpress page, things go
slightly wonky.

When I try to embed it into my Wordpress CMS, the table appears
exactly as you would expect, BUT all <td> and <td class="erow"> tags
are set to "display: none". I've tried adding something to the CSS
file to set display: inline, but that gets over-ridden when the page
loads.

FireBug thinks that the display:none; is being set INLINE (that is, at
page build).

No idea why that should be, but I thought I would let you know. (plus,
someone might know a fix).

Again, congrats: a great tool, and VERY lightweight compared to Ext
Grid or YUI datagrids. ("great tool" and "lightweight" are not meant
to be disparaging in any way).

Cheers


GT

[GT]

Oops - this is a double-up. Please ignore.

On Oct 28, 10:52 am, GT <G...@marketmentat.com> wrote:
> Hi there folks,
>
> Congrats to Paolo on flexigrid - it's a terrific jQuery tool.
>
> I got it working perfectly with JSON in a standalone page (an example

> is athttp://www.marketmentat.com/WIP/testflex1.php) ... but when I

[John Teague]

How are you trying to embed the grid in Wordpress? Please let us know.

[GT]

HI there John,

I just amended the JSON example and pointed the PHP script at one of
my own databases (the JSON stuff works fine).

The 'non-Wordpress' page is at http://www.marketmentat.com/WIP/testflex1.php
and works like a charm.

Once that was working - which was really easy - all I did was take the
code from within the 'body' tags of that page and embed it into a
Wordpress post (with the page set to display full-width), ensuring
that the reference to the PHP file that created the JSON data was
amended appropriately. The post itself - which will eventually be a
static page that updates dynamically - should remain constant since
changes in the database will automatically reflect when the JSON
element does its work.

Within WP, the flexigrid renders, and if you examine the elements the
data is 'there' but the style properties of the TD elements are
somehow set to 'display:none' during the render (there is nothing in
my CSS to do this, and FireBug tells me that the CSS is being set
inline).

For the moment I can't point you to the appropriate Wordpress page,
because I have only attempted this on my local (development) install
of Wordpress. The code is identical to what's on the standalone page,
except that the headers and footers in the Wordpress page are more
complex.

I had a bit of a scratch around within the js file, and noted that the
attriute seemedto be being appended at line 678 (within function
addCellProp() )

if (pth.hide) $(this).css('display','none');

Commenting this line made the TD elements visible (but made other
things go awry). I can't see where pth.hide

Cheers


GT

On Oct 28, 11:56 am, John Teague <johnt...@gmail.com> wrote:
> How are you trying to embed the grid in Wordpress? Please let us know.
>
> On Tue, Oct 27, 2009 at 6:52 PM, GT <G...@marketmentat.com> wrote:
>
> > Hi there folks,
>
> > Congrats to Paolo on flexigrid - it's a terrific jQuery tool.
>
> > I got it working perfectly with JSON in a standalone page (an example

> > is athttp://www.marketmentat.com/WIP/testflex1.php) ... but when I

[John Teague]

It sounds like some part of wordpress is overriding styles that are being added inline when constructed by the grid. take a look at

function safecss_filter_attr located in 'kses.php' found in wp-includes folder. Your problem may be there. If that is the case, try and wrap your grid in another div first.

From what I can gleen, wordpress looks to see if the user has unfiltered_html = true first. If so, it removes the filters. If not, it adds them back. The only problem is that I can't see where it would insert an inline style. I can only see where it would strip the inline style. I'd be interested in taking a look at a live shot of this if you can arrange it, knowing you are currently limited to a localhost env.

John

[GT]

Hi again John,

Wrapping it in a DIV worked - that's the only change I made (funnily
enough, the code that was in the standalone page was already wrapped
in a div... I got rid of it because the div was not required in the
Wordpress page).

I'm not sure if kses.php is playing a role, if so I will have to
switch on unbuffered_html ; I already over-ride WP's tendency to try
and stuff around with things (I use a lot of jquery load()s in my
pages, and WP kept inserting <br />'s everywhere).

The live shot is at http://www.marketmentat.com/home/testgrids/ and is
working perfectly.

It's a bit slapdash at present (it's in the default page rather than a
full-width page) so I've password protected it until I fix the page
template. The password is testgrids (all lower case).

As you can see, your suggestion worked perfectly.

Thanks very much for the insight; that goes straight into EverNote so
I never forget it.

Cheers



GT

On Oct 29, 3:00 am, John Teague <johnt...@gmail.com> wrote:
> It sounds like some part of wordpress is overriding styles that are being
> added inline when constructed by the grid. take a look at
>

> *function safecss_filter_attr* located in 'kses.php' found in wp-includes

[GT]

Dammit.

While trying to fix the layout for the live page, I noticed that WP
was not permitting me to change the Page template (a stuffup that I
had not noticed - my pages had not changed for months).

In fixing it (in order to be able to embed the flexigrid within a full-
width page) the old problem re-emerged.

I'm going to try surgery on kses.php now.

Cheers


GT

On Oct 30, 6:00 pm, GT <G...@marketmentat.com> wrote:
> Hi again John,
>
> Wrapping it in a DIV worked - that's the only change I made (funnily
> enough, the code that was in the standalone page was already wrapped
> in a div... I got rid of it because the div was not required in the
> Wordpress page).
>
> I'm not sure if kses.php is playing a role, if so I will have to
> switch on unbuffered_html ; I already over-ride WP's tendency to try
> and stuff around with things (I use a lot of jquery load()s in my
> pages, and WP kept inserting <br />'s everywhere).
>

> The live shot is athttp://www.marketmentat.com/home/testgrids/and is

[John Teague]

I know this is a late reply, but was wondering if you go this fixed.
If not, I was going to suggest using Drupal Panels module to create a
custom layout. Panels and Views are two modules I can't live without.

[GT]

Hi there John,

It's working now, but in some sense it would be dishonest of me to say
that I 'got it working' - one day I decided to have another crack at
fixing it, only to find it was working perfectly (alothough there is
some minor hinkiness in the alignment between column headers and
columns).

It coincided with getting rid of a series of Wordpress plugins: I did
a purge recently (partly in a quest for YSlow efficiency - now at
93-99 site-wide on the 'small site' criteria).

In doing the purge I got rid of the only plugin that used mootools -
and I notice that there is some mention on the flexigrid site of
possible 'noconflict' issues with mootools and ProtoType, so maybe
that is what did it.

It's still not 'in production' in the sense that it's not formally
part of the site kit (I still have to add clickability to enable users
to fetch PDFs for each Annual Report); that's job 8 on my current 10-
point job list.

The link has changed for the 'testgrids' page too, since I changed the
url structure (getting rid of the /page/ and /category/ terms within
Wordpress' default URL mechanism)... it's now at

http://www.marketmentat.com/testgrids/

In time I plan to add some more interactivity - enabling users to
search other types of news releases (i.e., other than Annual Reports).
For now it's working pretty much exactly as I wanted within that
testgrids page.

Cheerio


GT