Flexigrid - Lightweight but rich data grid

[eluser]paulopmx[/eluser]
[quote author="anakreon" date="1217265255"]I do not want to change the initilization of flexgrid.
Nor can I have a server side script generate the code.

What I need is after the grid is created and initilized,
when a user clicks some links, change the parameters flexgrid
sends to the server and reload the data.

In pseudocode would be:
function onUserClick(id) {
$('#flexgrid_table').params({category_id: id});
$('#flexgrid_table').reloadData();
}

Is it possible to alter the parameters *after* the grid is created?
Is there a function which would force the component to reload it's data (like the refresh button
the component displayes)?

Thanks for you replay[/quote]

Yup, its called flexOptions and flexReload, I have several sample codes posted in this thread on how to use.

[eluser]paulopmx[/eluser]
[quote author="tof" date="1217257956"][quote author="paulopmx" date="1216907081"][quote author="tof" date="1216757662"]hello,
i'm going to use flexigrid for my new programs.
however, i would like to dynamically parse the grid's attributes to add new functions to the grids (printing, csv output, etc).
i've passed the all day trying to get the colModel definition but i didnt succeed.
i want to get the colModel definition, the sortname & sortorder attributes, in javascript, so that i can generate the sql command coresponding to the user choices once he had played with the grid appearance...
maybe someone here can help me ?[/quote]

I actually don't understand why you need the grid's attributes to add new functions of (printing, csv output, etc).

But to get the attributes try this custom api method

Code:

$.fn.flexAttr = function(p) {

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

    };

[/quote]

Thanks for the answer. i need it because i want to know what columns remains after the user had rearrange his grid, and what is the new sort criteria.
i can parse the DOM generated but i think it would be more accurate to get these informations directly from the attributes of the flexigrid component.

I have try to implement your function but when i call it by : jQuery('#mygrid').flexAttr('title'); i get an [Object] instead of the title attribute of the grid.[/quote]

Hi, you don't need to parse this information, sortname and sortorder is always posted on the server, along with paging, please use Firebug to see this.

As for which columns remains, you don't need this as well, just follow the order of your colModel, the grid will hide and reorder the data, according to how the user has changed the grid.

Paulo

[eluser]paulopmx[/eluser]
[quote author="TheJayL" date="1217276478"]This code chunk was giving me an error in IE6. I commented it out and do not get the error anymore. On top of that, I see no change to the grid, so what exactly does this code segment do??

Code:

else if (!g.colresize) {

                                    /*var nv = $('th:visible',g.hDiv).index(this);
                                    var onl = parseInt($('div:eq('+nv+')',g.cDrag).css('left'));
                                    var nw = parseInt($(g.nBtn).width()) + parseInt($(g.nBtn).css('borderLeftWidth'));
                                    nl = onl - nw + Math.floor(p.cgwidth/2);

                                    $(g.nDiv).hide();$(g.nBtn).hide();

                                    $(g.nBtn).css({'left':nl,top:g.hDiv.offsetTop}).show();

                                    var ndw = parseInt($(g.nDiv).width());

                                    $(g.nDiv).css({top:g.bDiv.offsetTop});

                                    if ((nl+ndw)>$(g.gDiv).width())
                                        $(g.nDiv).css('left',onl-ndw+1);
                                    else
                                        $(g.nDiv).css('left',nl);

                                    if ($(this).hasClass('sorted'))
                                        $(g.nBtn).addClass('srtd');
                                    else
                                        $(g.nBtn).removeClass('srtd');*/

                                    }

[/quote]

the code is for show/hide of the column toggle control

[eluser]llbbl[/eluser]
nice job paulo

[eluser]paulopmx[/eluser]
[quote author="bao.vu" date="1217306067"][quote author="TheJayL" date="1217288265"]When you say one page, you mean one physical page of paper, or do you mean one page like the pager?

If its one page, as in the pager, then the query is still using LIMITED, or it is not using the new data, but the data the list was created with.[/quote]

One page of the physical paper. All data on my table displays in one page of the grid (I don't have to click next page). But when I print, only the portion that is on the first page printed. I hope I explained that well.[/quote]

Add this to your html

Code:

<style media="print">
        .bDiv
            {
            height: auto !important;
            }
    </style>

Let me know if it helps.

[eluser]Unknown[/eluser]
Hi Paulo,

Very nice job on this. I have it working and integrated with my application, but I am trying to make an event (or link) trigger when a row is clicked. I can't figure out a way to do that without modifying flexigrid.js. Is it possible? Something like this...

Code:

[removed]
$(document).ready(function(){
    $('tbody tr','bDiv').each
    (
        function ()
            {
            $(this)
            .click(
                function (e)
                    {
                        window.alert(this.id);
                    }
            )});
});
[removed]

I can't seem to get anything to work for clicking on a row and triggering an event. I also tried this...

Code:

[removed]
    $(document).ready(function(){
        $('#myflexigrid tr').click(function(){
            window.alert(this.id);
        });
    });
[removed]

Is there any way to accomplish this?

[eluser]unexpectedly[/eluser]
[quote author="Spraguey" date="1217363295"]Is there any way to accomplish this?[/quote]

Hi Spraguey, look at my reply above (page 53?) ... see where I mention (and link to) the posts near #300? There are examples of how adwin did exactly what you seek. I never could make those work, so I added onClick() to the things I wanted handlers for. Paulo says "it's in the API and documented here in the thread" but I never was able to get it working. Since the onClick works, I only give "science projects" 6 or 10 hours of attempts before just going with something else less elegant but effective.

Chris

[eluser]tof[/eluser]
[quote author="paulopmx" date="1217306900"][quote author="tof" date="1217257956"][quote author="paulopmx" date="1216907081"][quote author="tof" date="1216757662"]hello,
i'm going to use flexigrid for my new programs.
however, i would like to dynamically parse the grid's attributes to add new functions to the grids (printing, csv output, etc).
i've passed the all day trying to get the colModel definition but i didnt succeed.
i want to get the colModel definition, the sortname & sortorder attributes, in javascript, so that i can generate the sql command coresponding to the user choices once he had played with the grid appearance...
maybe someone here can help me ?[/quote]

I actually don't understand why you need the grid's attributes to add new functions of (printing, csv output, etc).

But to get the attributes try this custom api method

Code:

$.fn.flexAttr = function(p) {

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

    };

[/quote]

Thanks for the answer. i need it because i want to know what columns remains after the user had rearrange his grid, and what is the new sort criteria.
i can parse the DOM generated but i think it would be more accurate to get these informations directly from the attributes of the flexigrid component.

I have try to implement your function but when i call it by : jQuery('#mygrid').flexAttr('title'); i get an [Object] instead of the title attribute of the grid.[/quote]

Hi, you don't need to parse this information, sortname and sortorder is always posted on the server, along with paging, please use Firebug to see this.

As for which columns remains, you don't need this as well, just follow the order of your colModel, the grid will hide and reorder the data, according to how the user has changed the grid.

Paulo[/quote]

In fact, I do need to parse the grid, because i use it as a static grid (not a dynamic one with JSON). So when the user reorder the columns, or hide some columns, he does it on the client side and no information is still posted to the server.
I'm implementing outputs like printings, csv output, etc, that must reflect exactly the grid so i have to parse it to know what columns are displayed and the sort criterias.
actually, i'm parsing the generated html, but i would have preferred to access the grid to get the colModel and sortname properties.

[eluser]TheJayL[/eluser]
I've been looking for the source of the memory leak for a few days now. One thing that seemed to help (but I didnt test properly), was nulling out every single var once it is about to go out of scope. This took my app from around 5MB leaked, to between 1 and 2.5 mem leaked.

I also am using Drip and it is telling me that my leakage is mainly Divs, and also Bold Text. Now, I have in a cell of the grid a cell with all 26 letters of the alphabet, each one a seperate dom element so they can be different colors based on program. All of these show up.

So after more snooping I found:
http://blog.systemcoder.com/2006/12/why-...-ajax.html

which basically says never ever use "inner HTML" in code because it always leaks. It does mention IE6+ as the problem, so I assume IE7 is the same.

the innerHTML command is used extensively in the grid, does anyone have any insight as to this being the culprit for the majority of the leaking.

***GOTTA LOVE MICROSOFT**********

Edit***
I ran Drip on your main page for flexigrid, it seems to be having the same leaks as my page. Please if anyone has found a solution to this leakage let me know.

The leak gets worse the more items are in the grid. Seems every DIV in each cell is leaking as well as any formatting tags like bold or italic. There are a few other leaks as well like the tbody and table itself, but I can deal with a few leaks. The leaks coming from inside the grid though I cannot.

I have tried the purge function at http://javascript.crockford.com/memory/leak.html and it doesn't help, and the jquery people were no good either.

[eluser]justinkelly[/eluser]
[quote author="Armorfist" date="1217006496"][quote author="justinkelly" date="1216961466"][quote author="paulopmx" date="1216905639"]

Hi guys,

I didn't really design flexigrid to use % sizes as the dragndrop and resizing functions are dependent on accurate per pixel measurements.

Paulo[/quote]

Thanks for the reply Paulo

its more of an visual appeal factor - i use 100% width grid for my project and having columns in px will leave a blank space in the grid on a larger screen (which doesn't look to nice)

from what i can remember open rico grid does some funky % -> px calculation based on grid size to handle resize etc and columns based on %

question: is there an easy way to find the px width of a flexigrid? - if so then i can look at writing a % -> px type conversion type

If anyone else has any suggestions i would appreciate hearing them

Cheers

Justin[/quote]

Hello Justin,
This is actually very simple:

With jquery COOKIE plugin, I retrieve the screen resolution width and store it in a cookie:

Code:

[removed]
$(document).ready(function() {
    $.cookie('scrres', screen.width);
});
[removed]

Then with PHP all you have to do is get that cookie and calculate the column size based on the percentage.

Code:

function calculate_column_size($column_size)
    {
        $screen_res = get_cookie('scrres'); //This is a codeigniter function from the "cookie" helper
        if ($screen_res != FALSE)
            $usable_screen = ($screen_res);
        else
            $usable_screen = (1024); //Default resolution
        
        return ($column_size*($usable_screen/100)); //Calculate in pixels and return
    }

You also can probably do this with javascript only.
Hope it helps![/quote]

Thanks Armorfist!

I will give this a go

Cheers

Justin