Flexigrid - Lightweight but rich data grid

[eluser]SpooF[/eluser]

I’ve been invited to join the jQuery UI core team and create a jQuery UI version of my grid. This will allow me to accelerate development be leveraging the expertise of the other members of the jQuery UI core team.

Awesome!

I just saw this even though it seems like its been around the forums for a while. I'm currently working on a client portal for a fairly large media design company and I'm looking forward to using this.

[eluser]gius[/eluser]
Hi, I've discovered an optimalization fix for Flexigrid - change the definition of the addCellProp function to the following:

Code:

addCellProp: function() {

    var pthArray = $('th', g.hDiv);
    var columns = pthArray.length;
    var cellNum = 0;

    $('tbody tr td', g.bDiv).each
    (
        function() {
        var n = cellNum % columns;
        var pth = pthArray[n];
        cellNum++;

        var tdDiv = "<div style='";

        if (pth != null) {
            if (p.sortname == $(pth).attr('abbr') && p.sortname) {
                this.className = 'sorted';
            }
            tdDiv += $('div:first', pth).attr("style");

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

        if (p.nowrap == false) tdDiv += "white-space:normal;";

        if (this[removed] == '') this[removed] = '&nbsp;';

        tdDiv += "'>" + this[removed] + "</div>";

        if (pth != null) {
            var prnt = $(this).parent()[0];
            var pid = false;
            if (prnt.id) pid = prnt.id.substr(3);
            if (pth.process) pth.process(tdDiv, pid);
        }

        this[removed] = tdDiv;

        //add editable event here 'dblclick'
    }
    );

Especially the use of the pthArray variable has brought a great performance boost.

[eluser]adwin[/eluser]
[quote author="paulopmx" date="1216018315"]Updates:

Hi guys, new release 1.0b3 on the website, some of your concerns where answered (like the often requested single row select, some where not.

Another great news!

I've been invited to join the jQuery UI core team and create a jQuery UI version of my grid. This will allow me to accelerate development be leveraging the expertise of the other members of the jQuery UI core team.

Paulo[/quote]

that's great paulo ... i wish jquery ui has grid system and they start to adobt your flexigrid. that's wonderfull .. i love your flexigrid and i love jquery ui as well.

[eluser]adwin[/eluser]
Paulo:
is your new flexigrid (14 July 2008) is compatible with the previous version ?
I used flexigrid from CI plugins and when I replaced with newest version the sort function is not appear and don't work

my code

Code:

$(document).ready(function() {
    $("#flex1").flexigrid({
        url: 'http://localhost/iLink/admin/myuser/ajaxlist',
        dataType: 'json',
        sortname: 'id',
        sortorder: 'asc',
        usepager: true,
        useRp: true,
        rp: 10,
        showTableToggleBtn: true,
        width: 'auto',
        height: 250,
        colModel: [{
            display: 'ID',
            name: 'id',
            width: 70,
            align: 'center'
        },
        {
            display: 'User Name',
            name: 'user_name',
            width: 150,
            align: 'center'
        },
        {
            display: 'First Name',
            name: 'firstname',
            width: 200,
            align: 'center'
        },
        {
            display: 'Last Name',
            name: 'lastname',
            width: 200,
            align: 'center'
        },
        {
            display: 'Actions',
            width: 70,
            align: 'center'
        }],
        searchitems: [{
            display: 'ID',
            name: 'id'
        },
        {
            display: 'User Name',
            name: 'user_name',
            isdefault: true
        },
        {
            display: 'First Name',
            name: 'firstname',
            isdefault: true
        },
        {
            display: 'Last Name',
            name: 'lastname',
            isdefault: true
        }],
    });
})

[eluser]adwin[/eluser]
[quote author="JUANITO26" date="1215784787"]somebody knows as it is possible to be made several fields search? to see example
http://www.solured.es/5/prueba.jpg
Mucha Gracias Amigos.[/quote]

Yes it is possible ...
open your flexigrid.js
and search for this line "$(g.sDiv).append("<div class='sDiv2'>Quick Search &lt;input type='text' size='30' name='q' class='qsbox' /&gt; <select name='qtype'>" ...

you can add your own input and button over there.
after that you can assign bind onclick for each new button/input box you added.

mine was like this

Code:

$(g.sDiv).append("<div class='sDiv2'>Quick Search &lt;input type='text' size='30' name='q' class='qsbox' /&gt; <select name='qtype'>"+sopt+"</select> &lt;input type='button' value='Search' /&gt;&lt;input type='button' value='Clear' /></div>");

                $('input[name=q],select[name=qtype]',g.sDiv).keydown(function(e){if(e.keyCode==13) g.doSearch()});
                $('input[value=Search]',g.sDiv).click(function(){g.doSearch(); });
                $('input[value=Clear]',g.sDiv).click(function(){$('input[name=q]',g.sDiv).val(''); p.query = ''; g.doSearch(); });
                $(g.bDiv).after(g.sDiv);

I add search button in case the user don't know that he just need to press [return] lol

[eluser]TheJayL[/eluser]
Gratz on joining the UI team, its deserved as this is the best I have seen.

Back a while ago I made a post about everything that I had to have this grid do. I have now done all of them:

1. Allow multi column sorting using shift key
2. Allow both a quick search and an advanced search(PHP)
3. create a context menu on row items using right click.
4. Store session variables of the current page, the rows per page, the sort columns, the sort order of each column (asc, desc), as well as both the quick search and advanced search.

This leaves me with one last area and my question. I need to also store in the session the column order, and the column widths so a user can set up a list the way they want, navigate away, and when they come back have it be as they left it. I't thinking this would just be a serialized string like "100,200,300,20,450" and "col1,col2,col4,col3,col5". and then play with php and the initial script setup. So what is the javascript element or elements responsible for keeping track of the width and column order so i can serialize it for session vars?

[eluser]Kevin Kietel[/eluser]
First of all, Paulo: congratulations on joining the UI team!

to TheJayL:

is it possible to put a little demo of your new code online somewhere?
I'm very interested in using your multi column sorting and the context menu.

I've been working on a solution for 'sorting' items that need a certain order
(like menu items that have a position stored in the database.
It's working now, it's a combination of PHP/MySQL and jQuery.
I will try to put a working demo online as soon as I can.

Also your idea about storing the column widths and order in a certain way the user wants it. How about saving it in a cookie instead of session variables? Users don't have to reset column widths and order when they close and reopen their browser window...

http://plugins.jquery.com/project/cookie



[quote author="TheJayL" date="1216163291"]Gratz on joining the UI team, its deserved as this is the best I have seen.

Back a while ago I made a post about everything that I had to have this grid do. I have now done all of them:

1. Allow multi column sorting using shift key
2. Allow both a quick search and an advanced search(PHP)
3. create a context menu on row items using right click.
4. Store session variables of the current page, the rows per page, the sort columns, the sort order of each column (asc, desc), as well as both the quick search and advanced search.

This leaves me with one last area and my question. I need to also store in the session the column order, and the column widths so a user can set up a list the way they want, navigate away, and when they come back have it be as they left it. I't thinking this would just be a serialized string like "100,200,300,20,450" and "col1,col2,col4,col3,col5". and then play with php and the initial script setup. So what is the javascript element or elements responsible for keeping track of the width and column order so i can serialize it for session vars?[/quote]

[eluser]adwin[/eluser]
what is the difference between onSuccess and onSubmit ?
is onSuccess will be triggered every time the flexigrid reload data?

[eluser]paulopmx[/eluser]
Thanks guys.

@adwin

onSuccess is triggered after new data arrives. onSubmit is triggered before new data is requested.
on your Sorting problem, i did make any radical changes on that. Can you check your firebug if any error is triggered?

@code Contributors like TheJayL

excellent guys, there have been lots of contributions on this forum, and I'm afraid I wasn't able to sort through all of them when I made the new release, I will have a second look through all the postings and see if I can add them to the main build.

[eluser]adwin[/eluser]
[quote author="paulopmx" date="1216196385"]Thanks guys.

@adwin

onSuccess is triggered after new data arrives. onSubmit is triggered before new data is requested.
on your Sorting problem, i did make any radical changes on that. Can you check your firebug if any error is triggered?[/quote]

yep you did... previous release, you make the sortable as true by default for all column. and the newest you make sortable as false by default. that's why my column cannot using sort function it solved

so onSuccess will be triggered when the table finished loading data right. I need to do some calculation based on the data that appeared on the current table.