Thread

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.

Hi, I’ve discovered an optimalization fix for Flexigrid - change the definition of the addCellProp function to the following:

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

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

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. 😊

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

$(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
        }],
    });
})

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.

Yes it is possible ...
open your flexigrid.js
and search for this line “$(g.sDiv).append(”<div class=‘sDiv2’>Quick Search <input type=‘text’ size=‘30’ name=‘q’ class=‘qsbox’ /> <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

$(g.sDiv).append("<div class='sDiv2'>Quick Search <input type='text' size='30' name='q' class='qsbox' /> <select name='qtype'>"+sopt+"</select> <input type='button' value='Search' /><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 😛

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?

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

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?

what is the difference between onSuccess and onSubmit ?
is onSuccess will be triggered every time the flexigrid reload data?

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.

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?

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.

The context menu I am using is from http://www.dynarch.com/products/dhtml-menu/.
Its another script that generates a popup menu for a list based on an Ordered List.  I believe there are other popup menu generators out there to actually make a context menu.  They key for me though was that the JS to create the menu was being fired on page load, and so it was not binding to rows function on as the list is created by ajax.  I had to add an ‘onSuccess: “MenuGenerator(Parameters)”’, and then at the end of the addData function, after the full XML has been parsed and the list is made i added “eval(p.onSuccess)”.  I know I am probably not using onSuccess as was intended, but I needed this to fire to onSuccess per se but onComplete, I may change the var name to be more politically correct.

As far as widths and columns I have to use sessions, max security reasons.  In fact, I’m not using conventional sessions at all, something a lil more complex for security again, but they can function just like good ol’ $_SESSION[]‘s.  So no to cookies in this case.  I am getting what I need by using simple jquery, please keep in mind I am new to jquery so if there is a more eloquent way of coding what I have please let me know, I am no expert:

//store column order
            var headString = '';
            var headElements = $('thead tr',this.hDiv).children('th');

            for(i=0; i<headElements.length;i++)
            {
              headString += $(headElements[i]).attr('abbr');
              if(i != headElements.length-1) headString +=',';
            }
            setSession('columnorder',headString,0);

This code is at the end of dragEnd() function. So the state is captured everytime user changes something on the page.

setSession is a custom function I have living on every page that fires ajax to set the sessions in the background with a name, the value, and a boolean if the page should reload or not given the new data.

Multi sort-The big thing is sortorder and sortname are now 2 arrays and referenced as such.  I changed a lot of little stuff to reflect this. 

The new setup js has:

sortname = new Array(“col1”,“col4”,“col3”),
sortorder = new Array(“asc”,“desc”,“desc”),

I am having trouble on multi sort getting it to display the arrows for asc, desc on a page reload still so not 100% yet.  And like I said, I’m just starting into jquery world so if there is a better way to do the code I have please correct it.

I’ll try and get some kinda demo thing once I have got it doing exactly what I need, it will take a while to do, and I’d like to clean my code first.

Also, I can’t upload my js file to this forum, too many changes for allowing multi sort to just post code snippets.  Everytime sortorder or sortname are referenced I had to make a change for the arrays, but most notibly added:

changeSortMulti: function(th) { //change sortorder for multi columns

        if (this.loading) return true;

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

        $('div',th).removeClass('sasc');
        $('div',th).removeClass('sdesc');
        if (p.sortname.indexOf($(th).attr('abbr')) == -1)
        {
            p.sortname.push($(th).attr('abbr'));
            p.sortorder.push('desc');
            $('div',th).addClass('sdesc');
        }
        else
        {
          var place = p.sortname.indexOf($(th).attr('abbr'));
          if (p.sortorder[place]=='asc') p.sortorder[place] = 'desc';
          else p.sortorder[place] = 'asc';
          $('div',th).addClass('s'+p.sortorder[place]);
        }

        $(th).addClass('sorted');
        if (p.onChangeSort)
          p.onChangeSort(p.sortname,p.sortorder);
        else
          this.populate();

      },

and changed:

changeSort: function(th) { //change sortorder for only 1 column

                if (this.loading) return true;

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

                if (p.sortname[0] == $(th).attr('abbr'))
                    {
                        if (p.sortorder[0]=='asc') p.sortorder[0] = 'desc';
                        else p.sortorder[0] = 'asc';
                    }

                $(th).addClass('sorted').siblings().removeClass('sorted');
                $('.sdesc',this.hDiv).removeClass('sdesc');
                $('.sasc',this.hDiv).removeClass('sasc');
                $('div',th).addClass('s'+p.sortorder[0]);
        var temp = p.sortorder[0];
        p.sortorder = new Array();
        p.sortorder[0] = temp;
        p.sortname = new Array();
                p.sortname[0]= $(th).attr('abbr');

                if (p.onChangeSort)
                    p.onChangeSort(p.sortname[0],p.sortorder[0]);
                else
                    this.populate();
            },

as if they arent holding the shift key the array always only has one element at [0].  I havent done anything to onChangeSort as my code always just fires the else populate.

and changed the click of the thead to have:

$(this).click(
                                function (e)
                                    {
                    if (!$(this).hasClass('thOver')) return false;
                    var obj = (e.target || e.srcElement);
                    if (obj.href || obj.type) return true;

                    //user not using shift, only change one column
                    if(!e[p.sortMultiSortKey]) {
                      g.changeSort(this);
                    }
                    else //user using shift, multi column sort
                    {
                      g.changeSortMulti(this);
                    }
                  }
                            )

So I think I’ve confused myself, sorry for the long post and feel free to correct.

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.

Hi,

I’ve written an example in ASP.NET. If anyone is interested it’s here http://www.raihaniqbal.org/blog/using-flexigrid-in-your-aspnet-application/

Enjoy!

Hello - I have been using Flexigrid for a while now and have been really liking it! Great job!

I am running into a small problem though. I have a particular field that (in the UI) is a text field. So, it has a carriage return in it.

This carriage return is being saved to the database (MySQL). When I try and display this data in the Flexigrid it just spins and spins. Never returning anything. The data is being posted. I can see it in Firebug. However, the carriage return is there.

On the PHP side of things, I have tried to use str_replace (\n) and str_replace(\r) but to no avail.

Anyway, do you know of anyway I can get around this at all? Any suggestions would be helpful!

Thanks!

Hello - I have been using Flexigrid for a while now and have been really liking it! Great job!

I am running into a small problem though. I have a particular field that (in the UI) is a text field. So, it has a carriage return in it.

This carriage return is being saved to the database (MySQL). When I try and display this data in the Flexigrid it just spins and spins. Never returning anything. The data is being posted. I can see it in Firebug. However, the carriage return is there.

On the PHP side of things, I have tried to use str_replace (\n) and str_replace(\r) but to no avail.

Anyway, do you know of anyway I can get around this at all? Any suggestions would be helpful!

Thanks!

Try json_encode (a PHP method) to do the escaping for you, it can handle even carriage returns, and you don’t even have to remove it.