Flexigrid - Lightweight but rich data grid

Flexigrid - Lightweight but rich data grid - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Libraries & Helpers (https://forum.codeigniter.com/forumdisplay.php?fid=22)
+--- Thread: Flexigrid - Lightweight but rich data grid (/showthread.php?tid=7179)

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

Flexigrid - Lightweight but rich data grid - El Forum - 07-01-2008

[eluser]niidmore[/eluser]
Thanks for your help Paulo.
I am having another problem here with the little popup for showing or removing from the grid.
Howering on the header columns, the drop down disappearing before I can click on it.
Another problem is when I try to resize the columns, I am using jEditable plugin in the one of the column to allow users to fill in the text. This column breaking the alignments.
I have tried using the same doctype as the example page but still not doing it right.
Can you please advice whether it is possible to add html elements in the column?
Many thanks in advance.
Regards
Sam

Flexigrid - Lightweight but rich data grid - El Forum - 07-01-2008

[eluser]condev2008[/eluser]
Hello Paulo,
outstanding work, the best widget I've seen so far for jQuery, so thank you very much for sharing your fine work.

Here's some lenghty feedback with current Flexigrid and jQuery 1.2.6.

* IE with script error notification on (in 5.5, I know who cares):
Flexigrid errors at line 424 with "cell is not defined" (first FOR loop in "addData" function).

Not sure about the "cell.length" use, is this meant to be

Code:
$("cell",this).length

? Maybe you could explain in short how it would be even possible to have no headers? Smile

* I shot myself in the knee yesterday evening, having added a "width:100%" style attribute to my actual table tag.
With this being present, the column resizing is not usable as the header and data column widths are totally out of sync (regardless of option "resizable"). Also, it causes an empty
"left" value assignment in function "dragEnd" (variable "nw") in IE6/7 and FF3.
As a suggestion: remove any "width=/:xxx" from the table tag upon initialization always?

* option "width: auto"
The default CSS file has a fixed width of 1024px in 2 locations, which prevents the grid to resize nicely with "width: auto" option and resizing the browser window. Replaced these 2 with 100%.

* option "width: xxx"
As soon as a width is specified, it acts as the minimum width of the grid. Even if that width is much wider than all data columns, one cannot resize the grid narrower than that width. Is this supposed to act this way?
I had the idea of "width" being the initial grid width, but not actually a "minimum width" limit. Maybe it's worth considering adding a new option "totalMinWidth" for this?

* Assigning a class to buttons adds a left margin of 20 (hardcoded; should actually be padding). This should not be done at all as it would be the CSS classes' obligation to specify that (line 856, function "addRowProp").

Same function has this code (around line 822):

Code:
//set gDiv

        g.gDiv.className = 'flexigrid';

        if (p.width!='auto') g.gDiv.style.width = p.width + 'px';

To make it a bit more failsafe, I'd add a "parseInt" for the "p.width", like:

Code:
if (p.width!='auto') g.gDiv.style.width = parseInt(p.width) + 'px';

* Suggestion: new callback "onPopulateDone" called after ajax loading regardless of data being retrieved or not (usefull for e.g. additional splash display etc.), by changing line 602:

Code:
success: function(data){g.addData(data);}

to read like this:

Code:
success: function(data){

                     g.addData(data);

                     if (p.onPopulateDone) p.onPopulateDone();

                   }

To use it, add in the options of the Flexigrid initialization:

Code:
onPopulateDone: myfunction,

The same applies for a new option "onPopulate" (function) by adding
at line 556 this line:

Code:
if (p.onPopulate) p.onPopulate();

in front of

Code:
$('.pPageStat',this.pDiv).html(p.procmsg);

* The "hiding block" upon data load is not working good in IE6/7. As a workaround I commented out line 511:

Code:
if (p.hideOnSubmit) $(g.block).remove();

and added this line instead:

Code:
if (p.hideOnSubmit) $(g.block).css('opacity','0');

I'd be happy to hear about the correct way to fix this as I'm sure that above workaround is ugly. Smile

* The "minwidth" option is only checked upon column resizing, but not on initial grid display, i.e. it allows the columns to be narrower than the "minwidth" at first, i.e. upon resizing, it'll lock to the minimum width then.

* Slightly unrelated: I'd like to point out, that any call to a "jQuery.ajaxSetup(beforeSend:...)" call will later override the Flexigrid's "method" default option value (resetting it to GET), regardless of the

Code:
method: 'POST',

being in the options. This is, unless the "beforeSend" function would also set POST as the
default method.

* Why not use jQuery.getJSON instead of ajax() if JSON is the datatype?
There probably could be more options for the ajax call, e.g. for the "error" callback, timeout value etc.?

That's all for now, looking forward to the next update. Smile

Greetings from Germany,
Tobias

Flexigrid - Lightweight but rich data grid - El Forum - 07-03-2008

[eluser]adwin[/eluser]
[?] Question:
I want to do something after the ajax load all the data in flexigrid. how to do that ?
for example, after finish the loading, I want to bind all the buttons inside the table with a new event.

tx

Flexigrid - Lightweight but rich data grid - El Forum - 07-03-2008

[eluser]condev2008[/eluser]
[quote author="adwin" date="1215090530"][?] Question:
I want to do something after the ajax load all the data in flexigrid. how to do that ?[/quote]

This needs a little customization of the flexigrid.js file to allow for an additional event callback function. Please see my above post for "onPopulateDone" suggestion.

Flexigrid - Lightweight but rich data grid - El Forum - 07-03-2008

[eluser]adwin[/eluser]
[quote author="condev2008" date="1215092350"][quote author="adwin" date="1215090530"][?] Question:
I want to do something after the ajax load all the data in flexigrid. how to do that ?[/quote]

This needs a little customization of the flexigrid.js file to allow for an additional event callback function. Please see my above post for "onPopulateDone" suggestion.[/quote]

can I see your complete flexigrid.js Smile

Flexigrid - Lightweight but rich data grid - El Forum - 07-03-2008

[eluser]condev2008[/eluser]
[quote author="adwin" date="1215090530"]can I see your complete flexigrid.js Smile

[/quote]
Those 2 changes are described in my above post with line numbers and should be easily applyable (simple "find text" and replacing/pasting text). Smile

Flexigrid - Lightweight but rich data grid - El Forum - 07-03-2008

[eluser]Unknown[/eluser]
Awesome Grid!

I've been able to integrate with it pretty well, but for some reason I keep getting two undefined columns at the very right of the grid.

Has anyone else had this issue? I can provide some sample code if necessary.

Update:

I also have a couple of strange JavaScript methods embedded in the useRp dropdroplist

See image... http://elijah.manor.googlepages.com/Flexigrid.JPG

Flexigrid - Lightweight but rich data grid - El Forum - 07-03-2008

[eluser]condev2008[/eluser]
[quote author="elijahmanor" date="1215116671"]I've been able to integrate with it pretty well, but for some reason I keep getting two undefined columns at the very right of the grid.[/quote]
Please check your "colModel: [...]" options which seem to have 2 extra columns at the end.

Flexigrid - Lightweight but rich data grid - El Forum - 07-05-2008

[eluser]mrpaul[/eluser]
Hey guys,

I need some help. Say when someone clicks next page, is there any way i can append onto the tbody, the next pages rows? So basically instead of going to the next page, itll just append the next pages rows to the tbody?

Would I have to modify the flexigrid.js?

Thanks for the help!

Paul

Flexigrid - Lightweight but rich data grid - El Forum - 07-06-2008

[eluser]mrpaul[/eluser]
And one more thing.

When I use onSuccess to call a function called tips which is basically just an alert box for testing, and reload the grid after making changes to a form, the alert is displayed as many times as the grid is reloaded. Is there anyway to make it just call the function once and stop after reloading?

Thanks.