Jun 172011
 

Recently one of the projects I’ve been working involving database tables with hundreds and thousands of records required a grid to display data.  After doing a little searching I found a jquery project called Flexigrid.  In this article I’ll talk a little about my experiences with Flexigrid and some things I found that weren’t readily available on the internet.

What is Flexigrid and what does it do?

Flexigrid is a lightweight, highly customizable, limited functionality, grid for displaying table data in a spreadsheet styled table.  It offers dynamic ajax loading of xml or json data from a database and displays records in sortable, searchable, and rearrangeable columns that are organized by navigateable pages containing as many records as your user desires to see on his or her screen at one given moment.  It is remarkably easy to begin using because it offers basic functionality examples in php, javascript, and sql.  You can download if from http://flexigrid.info or http://code.google.com/p/flexigrid/ and view discussion on it here http://groups.google.com/group/flexigrid/?pli=1

Issues with Flexigrid:

  • Flexigrid does not work with the latest version of jquery and I had to use version 1.5.2 to get it to work, but thats not really a problem when you consider that jqueryui works just fine with that version.
  • Very limited documentation.
  • No current editing or updating functionality.
  • No mouse over tool tip style information for context sensitive help messages.  Requires customization to add such functionality.
  • Renders differently in different browsers.

My biggest issue was determining how to dynamically load a url.  The documentation offered did not show the correnct method of first updating the url property of the object before calling the reload method as shown here:

$(“#flex1″).flexOptions({‘url’: GetGridURL()});

$(“#flex1″).flexReload();

The flexReload() function accepts a url as an argument but it does not use it so the only way to specify a different url is to call flexOptions first and update it there.

Also I wanted to process the grid’s data and render the row  text color accordingly.  I found some references in the discussion forum and was able to piece together this solution.  If you add the onSuccess : YourFunction parameter to the flexGrid options you can cause it to call a YourFunction each time the grid is successfully loaded.  I added this function to onSuccess :

function StyleRows(){
$("tr").each(function() {
var st = $(this).find("td").eq(0).text();
if (st != "0" && st != "1"){ $(this).css("color", "black");}
else if (st == "1")  { $(this).css("color", "green");}
else if (st == "0")  { $(this).css("color", "red");}
 }); }

This information was not readily available.

I hope by posting these things here that I’ve saved you some time.

- Joel

  11 Responses to “Missing documentation for using Flexigrid”

  1. I’ve gotten flexgrid to work with jquery 1.6.1 also. What functions didn’t work, and caused you to have to downgrade?

  2. The entire grid didn’t work for me until I downgraded to jquery 1.5.2. I’m glad to hear you’ve got it to work with the latest version. What other libraries did you load with it?

  3. It happens that I wasn’t actually using the latest version as I was working from a remote site :) …. You were correct sir.

  4. This was very helpful to me.. Thanks..

    I needed to provide ‘Search as we type’ functionality….
    Based on your idea, I reloaded after reconfiguring ‘query’ and ”qtype’ –
    var query_val = $.trim($(‘[name=q]‘).val());
    var qtype = $(‘[name=qtype]‘).val();
    $(‘#flex1′).flexOptions({ ‘query’: query_val,’qtype’:qtype });
    $(‘#flex1′).flexReload();

  5. Hi,

    I’m trying to get an XML respond from FlexiGrid, but its not working correctly..

    Sample code is below:

    jQuery(“#flex1″).flexigrid({
    url: “../test/test.p?test=true”,
    dataType: ‘xml’,
    colModel : [
    {display: 'Protocol Id', name : 'protocol-id', width : 25, sortable : true, align: 'center'},
    {display: 'Title', name : 'short-title', width : 50, sortable : true, align: 'left'},
    {display: 'phase', name : 'phase', width : 20, sortable : true, align: 'left'}
    ],
    sortname: “protocol-id”,
    sortorder: “asc”,
    usepager: true,
    title: ‘Protocol – Test FlexiGrid’,
    useRp: true,
    rp: 15,
    showTableToggleBtn: true,
    width: 700,
    height: 200,
    }
    });

    Seems like the Ajax request(URL) is not passing any value to the backend..Can u please help me on this.

    Kalana

    • You have a typo near the bottom of your sample code:

      jQuery(“#flex1″).flexigrid({
      url: “../test/test.p?test=true”,
      dataType: ‘xml’,
      colModel : [
      {display: 'Protocol Id', name : 'protocol-id', width : 25, sortable : true, align: 'center'},
      {display: 'Title', name : 'short-title', width : 50, sortable : true, align: 'left'},
      {display: 'phase', name : 'phase', width : 20, sortable : true, align: 'left'}
      ],
      sortname: “protocol-id”,
      sortorder: “asc”,
      usepager: true,
      title: ‘Protocol – Test FlexiGrid’,
      useRp: true,
      rp: 15,
      showTableToggleBtn: true,
      width: 700,
      height: 200
      });

      Everything else looks correct. Could you send a sample of the xml response?

    • Kalana,
      Try wrapping your code in a function call like this:

      $(function(){
      $("#flex1").flexigrid({
      url: "http://catontech.com/examples/SampleXML.xml",
      colModel : [
      {display: 'Protocol Id', name : 'protocol-id', width : 25, sortable : true, align: 'center'},
      {display: 'Title', name : 'short-title', width : 50, sortable : true, align: 'left'},
      {display: 'phase', name : 'phase', width : 20, sortable : true, align: 'left'}
      ],
      sortname: "protocol-id",
      sortorder: "asc",
      usepager: true,
      title: 'Protocol - Test FlexiGrid',
      useRp: true,
      rp: 15,
      showTableToggleBtn: true,
      width: 700,
      height: 200
      });
      });

      I’ve put together an example of this here using the xml you sent. I hope it helps. If we can help you any further let us know and please let us know how your project turns out. Good luck to you.

  6. how to dynamically change the columns in flexgrid . I have used flexgrid which is not working

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Have a question? Need some advice? Get a free hour of consultation!!     Read More »