# Flexigrid for jQueryby Paulo P. Marinas

## What is it?

Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

### Features

- Resizable columns
- Resizable height and width
- Sortable column headers
- Cool theme
- Can convert an ordinary table
- Ability to connect to an ajax data source (XML and JSON[new])
- Paging
- Show/hide columns
- Toolbar (new)
- Search (new)
- Accessible API
- Many more

## FAQ

1. Where can I get support?
   Bugs can be reported http://code.google.com/p/flexigrid/, and our fantastic community support is available at http://groups.google.com/group/flexigrid/.
2. What's recently changed and what are the known bugs?
   Go to http://code.google.com/p/flexigrid/issues/list
3. What browsers does Flexigrid support?
   We support browsers IE6, Firefox 3, Opera 9, Safari 3, Chrome 7 and greater.
4. Where can I contribute code or suggest a feature?
   http://code.google.com/p/flexigrid/
5. Can I use it for personal or commercial projects/modify it/hack it?
   Absolutely! Just make sure you adhere to either the GPL or MIT licenses.
6. Can I connect this to a form or add Parameters?
   Sure, check out our sample code to learn how.

## Files you need

- jQuery
- FlexiGrid Plugin Pack(32K) (includes the js, css, and images)

## How to use

Check out the examples below, or browse the source.

## Example 1

The most basic example with the zero configuration, with a table converted into flexigrid (Show sample code)

    $('.flexme').flexigrid();

Col 1 | Col 2 | Col 3 is a long header name | Col 4
--- | --- | --- | ---
This is data 1 with overflowing content | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4

## Example 2

Table converted into flexigrid with height, and width set to auto, stripes remove. (Show sample code)

    $('.flexme2').flexigrid({height:'auto',striped:false});

Col 1 | Col 2 | Col 3 is a long header name | Col 4
--- | --- | --- | ---
This is data 1 with overflowing content | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4
This is data 1 | This is data 2 | This is data 3 | This is data 4

## Example 3

Flexigrid with dynamic data, paging, search, toolbar, and connected to an XML file. (Show sample code)

                $(".flexme3").flexigrid({
                    url : 'post-xml.php',
                    dataType : 'xml',
                    colModel : [ {
                        display : 'ISO',
                        name : 'iso',
                        width : 40,
                        sortable : true,
                        align : 'center'
                        }, {
                            display : 'Name',
                            name : 'name',
                            width : 180,
                            sortable : true,
                            align : 'left'
                        }, {
                            display : 'Printable Name',
                            name : 'printable_name',
                            width : 120,
                            sortable : true,
                            align : 'left'
                        }, {
                            display : 'ISO3',
                            name : 'iso3',
                            width : 130,
                            sortable : true,
                            align : 'left',
                            hide : true
                        }, {
                            display : 'Number Code',
                            name : 'numcode',
                            width : 80,
                            sortable : true,
                            align : 'right'
                    } ],
                    buttons : [ {
                        name : 'Add',
                        bclass : 'add',
                        onpress : test
                        }, {
                            name : 'Delete',
                            bclass : 'delete',
                            onpress : test
                        }, {
                            separator : true
                    } ],
                    searchitems : [ {
                        display : 'ISO',
                        name : 'iso'
                        }, {
                            display : 'Name',
                            name : 'name',
                            isdefault : true
                    } ],
                    sortname : "iso",
                    sortorder : "asc",
                    usepager : true,
                    title : 'Countries',
                    useRp : true,
                    rp : 15,
                    showTableToggleBtn : true,
                    width : 700,
                    height : 200
                });

                function test(com, grid) {
                    if (com == 'Delete') {
                        confirm('Delete ' + $('.trSelected', grid).length + ' items?')
                    } else if (com == 'Add') {
                        alert('Add New Item');
                    }
                }

## Example 4

Flexigrid with dynamic data, paging, search, toolbar, and connected to a php-session based JSON file. (Show sample code)

                $(".flexme4").flexigrid({
                    url : 'example4.php',
                    dataType : 'json',
                    colModel : [ {
                        display : 'EmployeeID',
                        name : 'employeeID',
                        width : 90,
                        sortable : true,
                        align : 'center'
                        }, {
                            display : 'Name',
                            name : 'name',
                            width : 120,
                            sortable : true,
                            align : 'left'
                        }, {
                            display : 'Primary Language',
                            name : 'primary_language',
                            width : 120,
                            sortable : true,
                            align : 'left'
                        }, {
                            display : 'Favorite Color',
                            name : 'favorite_color',
                            width : 80,
                            sortable : true,
                            align : 'left',
                            hide : true
                        }, {
                            display : 'Favorite Animal',
                            name : 'favorite_pet',
                            width : 80,
                            sortable : true,
                            align : 'right'
                    } ],
                    buttons : [ {
                        name : 'Add',
                        bclass : 'add',
                        onpress : Example4
                        }
                        ,
                        {
                            name : 'Edit',
                            bclass : 'edit',
                            onpress : Example4
                        }
                        ,
                        {
                            name : 'Delete',
                            bclass : 'delete',
                            onpress : Example4
                        }
                        ,
                        {
                            separator : true
                        }
                    ],
                    searchitems : [ {
                        display : 'EmployeeID',
                        name : 'employeeID'
                        }, {
                            display : 'Name',
                            name : 'name',
                            isdefault : true
                    } ],
                    sortname : "iso",
                    sortorder : "asc",
                    usepager : true,
                    title : 'Employees',
                    useRp : true,
                    rp : 15,
                    showTableToggleBtn : true,
                    width : 750,
                    height : 200
                });

                function Example4(com, grid) {
                    if (com == 'Delete') {
                        var conf = confirm('Delete ' + $('.trSelected', grid).length + ' items?')
                        if(conf){
                            $.each($('.trSelected', grid),
                                function(key, value){
                                    $.get('example4.php', { Delete: value.firstChild.innerText}
                                        , function(){
                                            // when ajax returns (callback), update the grid to refresh the data
                                            $(".flexme4").flexReload();
                                    });
                            });
                        }
                    }
                    else if (com == 'Edit') {
                        var conf = confirm('Edit ' + $('.trSelected', grid).length + ' items?')
                        if(conf){
                            $.each($('.trSelected', grid),
                                function(key, value){
                                    // collect the data
                                    var OrgEmpID = value.children[0].innerText; // in case we're changing the key
                                    var EmpID = prompt("Please enter the New Employee ID",value.children[0].innerText);
                                    var Name = prompt("Please enter the Employee Name",value.children[1].innerText);
                                    var PrimaryLanguage = prompt("Please enter the Employee's Primary Language",value.children[2].innerText);
                                    var FavoriteColor = prompt("Please enter the Employee's Favorite Color",value.children[3].innerText);
                                    var FavoriteAnimal = prompt("Please enter the Employee's Favorite Animal",value.children[4].innerText);

                                    // call the ajax to save the data to the session
                                    $.get('example4.php',
                                        { Edit: true
                                            , OrgEmpID: OrgEmpID
                                            , EmpID: EmpID
                                            , Name: Name
                                            , PrimaryLanguage: PrimaryLanguage
                                            , FavoriteColor: FavoriteColor
                                            , FavoritePet: FavoriteAnimal  }
                                        , function(){
                                            // when ajax returns (callback), update the grid to refresh the data
                                            $(".flexme4").flexReload();
                                    });
                            });
                        }
                    }
                    else if (com == 'Add') {
                        // collect the data
                        var EmpID = prompt("Please enter the Employee ID","5");
                        var Name = prompt("Please enter the Employee Name","Mark");
                        var PrimaryLanguage = prompt("Please enter the Employee's Primary Language","php");
                        var FavoriteColor = prompt("Please enter the Employee's Favorite Color","Tan");
                        var FavoriteAnimal = prompt("Please enter the Employee's Favorite Animal","Dog");

                        // call the ajax to save the data to the session
                        $.get('example4.php', { Add: true, EmpID: EmpID, Name: Name, PrimaryLanguage: PrimaryLanguage, FavoriteColor: FavoriteColor, FavoritePet: FavoriteAnimal  }
                            , function(){
                                // when ajax returns (callback), update the grid to refresh the data
                                $(".flexme4").flexReload();
                        });
                    }
                }