Tuesday, September 13, 2011

extend flexigrid


It's quite easy to understand, what's the magic behind
flexigrid, so I am not a afraid of not beeing able to update, since my
flexigrid at least twice as powerfull as the original one... In Germany we
say "Kosten Nutzen Rechnung", dunno if the translation "Costs and Benefits
Calculation" will point it out...

But here's something for you!! You can extend any jquery plugin easyly by
using the correct extender-function.

look at the end of the flexigrid.js. here you will find several extentions,
the author already implemented. Just Copy-Paste one of them, change the name
und the method, that will be called... add private method to flexigrid..

Example:

$.fn.flexReload = function(p) { // function to reload grid

        return this.each( function() {
                if (this.grid&&this.p.url) this.grid.populate();
            });

    }; //end flexReload

This function should be in your flexigrid.js already.  Copy that and paste
it like this:

$.fn.flexMyExtendedFunc = function(p) { // function to reload grid

        return this.each( function() {
                if (this.grid&&this.p.url) this.grid.myprivatefunction();
            });

    }; //end flexReload

Now, search for the function "populate" ... you'll find something like this:

populate: function () { //get latest data
                if(p.loadingIndicatorFunc)
                    p.loadingIndicatorFunc(true);
                var g = this;

[....]

Again.. Copy paste the whole function and rename it to "myprivatefunction"
and, of course, change the code inside the function.

You can pass parameters as well!

And now you may ask, how to call this function??

very easy!

Let's says, you have a " <table id="myFlexTable"/>∓lt;/table&gt;



You did   "$("#myFlexTable").flexigrid(...); somewhere...

Now just call  $("#myFlexTable").flexMyExtendedFunc();" 
and the code INSIDE the flexigrid ("myprivatefunction") will be executed. You have full control
in here... you can access all variables, the flexigrid uses...

And what about updating?

If you really JUST add a new extension method AND ONLY add methods to the
flexgrid-plugin, you can easyly copy-paste them to a new version.... That's
how I would do it... Anyway, trust me, if you ll get to understand the code,
the other way - adding updates via copy-paste to your version of flexigrid,
might be a lot faster...

Hope that helps some people out there, who try to expand the flexigrid.

Source code http://flexigrid.info/