Flexigrid - Lightweight but rich data grid

[eluser]daiyna[/eluser]
I tried on opera and it was the same as IE, div didnt include the scrollbar. Im not sure about the other browsers but i think it should be more like this:

Code:

scroll: function() {
                    this.hDiv.scrollLeft = this.bDiv.scrollLeft;
          if (!$.browser.mozilla)
          {
                      this.rePosDrag();
          }
            },

I wasn't talking about any specific bug, just the noticable change in scrolling speed surprised me

[eluser]TheJayL[/eluser]
^^^
Sorry good point. Its hard for me to get out of my mindset that I only have to deal with IE and Firefox, because for my App that IS all I have to worry about. I forget other browsers since I don't need them but for proper coding I should follow that. Thanks!

[eluser]pinkhominid[/eluser]
[quote author="pinkhominid" date="1216251009"]Paulo,

I am using flexigrid in a single-page thick-client ajax app that does not do full page postbacks. In this context I have found that flexigrid leaks a pretty significant amount of memory in IE. An instance of the grid with all the bells and whistles (example 3) leaks about 2-5 MB of memory per execution of the flexigrid() method.

Because of the way IE is designed this memory is not freed with a refresh or by closing the tab. It is only freed when all instances of IE are closed.

I've put together a bare minimum demo page that shows the leak. Look at it in IE6 or IE7 and click the 'new instance' buttons multiple times while monitoring IE memory consumption. Each click empties the containing div (using jQuery's empty() method) and creates a new flexigrid instance.

Also, I've tested Firefox & IE8 beta...they DO NOT have the problem.[/quote]

I think I've finally solved the IE memory leak issue. Well...OK...decreased the severity to KBs down from MBs. I had to modify the source a bit to do so. It appears that many of the anonymous functions and some DOM elems were holding onto private vars t, g, and p due to closure. Here is a demo page which implements the fix.

The core change starts at line 1360, replaces 6 lines, and caps off at 30 lines.

Code:

// pinkhominid (2008.09.20): ie leak fix start
        //add document events
        $(document)
        .mousemove(mousemove)
        .mouseup(mouseup)
        .hover(hoverover, hoverout);
        
        function mousemove(e) {
            g.dragMove(e);
        }
        function mouseup() {
            g.dragEnd();
        }
        function hoverover(){}
        function hoverout() {
            g.dragEnd();
        }
        g.cleanup = function () {
            $(document)
                .unbind('mousemove', mousemove)
                .unbind('mouseup', mouseup)
                .unbind('mouseenter mouseleave', hoverout)
                .unbind('mouseenter mouseleave', hoverover);
            p = null;
            g = null;
            t.p = null;
            t.grid = null;
            t = null;
        };
        // pinkhominid (2008.09.20): ie leak fix end

Additionally, I've added a convenience function called flexDestroy in the $.fn plugin section.

Code:

// pinkhominid (2008.09.20): ie leak fix start
    $.fn.flexDestroy = function() {
        return this.each( function() {
                if (this.grid) {
                    $(this.grid.gDiv).remove();
                    this.grid.cleanup();
                }
            });        
    };
    // pinkhominid (2008.09.20): ie leak fix end

Hopefully, this change can be rolled into the next release. Any takers for expanding on this and freeing that last ~150KB that's still leaking?

[eluser]ThanMan[/eluser]
[quote author="unexpectedly" date="1219285216"][quote author="ThanMan" date="1219263316"]
This will give me the row id.

But I can't figure out how to get the value of a cell in the selected row of a specific column..

Could you please help me ?

Thanks[/quote]

I took care of this by making the cell information part of the td's #id. The way I did it was using the field name and the cell's id and then I parse it in the javascript... but you can use both! Each cell can have an id like this: <td id="widget-34-46.50"> where "widget" is the field name, 34 is the ID of it in my database, and 46.50 is the "value" of the field. Then I split up the text string on the - character. You can use any char that's known to not be in your field info, like the right double quote.

Chris[/quote]

Hi Chris,

Thanks for the reply, but it's not really a solution for me.
Some columns of grid hav full UNC path's, and a lot of characters in some columns, so when I apply you're solution, my cell id's will be very long.

Isn't there any other solution such as :

Code:

$(this).attr('id') will give me the Id column...

But I tried that for example

Code:

$(this).attr('some_other_column')

This will give me an error..

Does anybody has an answer ??

Thanks

[eluser]ThanMan[/eluser]
Can anybody please tell me all available parameters for the flexigrid ?

I'm curious about the settings and all that the flexigrid is capable of
and because I would like to try to include Flexigrid into an asp.net usercontrol,
with dynamic databinding etc.etc.

Thanks

[eluser]paulopmx[/eluser]
Small Update...then again maybe not

I will soon be releasing a new update to Flexigrid, some might be shock but it will be sort of a rewrite, which means some of the API might change. The goal of this rewrite is threefold.

1. New CSS framework. The current CSS dies when it is mixed with some other CSS, for example using Flexigrid in a Drupal website will cause Flexigrid to look out of whacked :-(. The new CSS will be super protected so as not to inherit unnecessary styling from other CSS layouts. I will also make it possible to apply different styles on different grids but on the same page.

2. Following the jQuery UI API format. Currently I'm not even sure if Flexigrid is still in the running to becoming the official grid for jQuery UI (long story), but I think their way is better and I'd like to adapt some of their practices as to make it easy for me to transition Flexigrid if it happens.

3. Better extensibility. Right now I'm glad and overwhelmed by the number of guys wishing to contribute code for this project, the problem is that its not always consistent with what I envision for the plugin, which I wish to remain lightweight. That means I had to reject a lot of contributions that are probably useful for someone but not everyone.

So my solution is to open an API that will allow a developer to replace any methods, without actually hacking my code. What does this mean? This means, if you have a code for a better paging system, a better handling of JSON object, fine. You can write a function that will overwrite parts of Flexigrid without hacking the it. And other users can just connect your code to Flexigrid and BAM! Everybody happy :-)

[eluser]paulopmx[/eluser]
On a different note

I love CI, that's why I decided to first post about my plugin here. But the thread became rather large and I think it became silly that I keep using this forum and risk overstaying my welcome :-).

I'm considering moving it to Google Groups, but I wouldn't want to move without asking the guys who actively participate in this thread their opinion.

So? What do you guys think?

Paulo

[eluser]Armorfist[/eluser]
I personally like CI forums better than google groups in terms of interface.
In the other hand, this IS a CI forum, thus makes sense to make the transition to google groups. Besides, not everyone who uses FlexiGrid uses CI and almost every developer has a Google account, so that facilitates the feedback.

Btw, sorry for asking this but... is there a release date or something?

[eluser]paulopmx[/eluser]
[quote author="Armorfist" date="1219535242"]I personally like CI forums better than google groups in terms of interface.
In the other hand, this IS a CI forum, thus makes sense to make the transition to google groups. Besides, not everyone who uses FlexiGrid uses CI and almost every developer has a Google account, so that facilitates the feedback.

Btw, sorry for asking this but... is there a release date or something? [/quote]

If my free time permits, it should be within the next two weeks. Almost done with the new CSS and its handling very well in a Drupal Garland theme, where it used to fail before. Also significantly reduce the amount of events I need to assign in Javascript, by handling some of it through CSS behavior.

[eluser]paulopmx[/eluser]
Hi Guys,

Here's a preview of the new CSS and Slice of the upcoming release:

http://webplicity.net/flexigrid/grid3test/ref.html

This is just a slice by the way, but its also a proof of concept on who it can withstand a drupal Garland CSS.

Paulo