Home

NOTE: I've cobbled up this documentation based on my own observations, because the project authors have yet to provide any. Thus, there may be mistakes, misinterpretations and omissions. --ppar

Usage

Using an existing HTML table

To convert an existing HTML <table> element to a Flexigrid table, call

jQuery('#my_table').flexigrid({
    option1:   value,
    option2:   value,
    ....
});

... where '#my_table' is a jQuery selector specifying the table to convert. The

element is replaced with the Flexigrid UI. See "Configuration Options" below for a list of available options.

Using data from an external source

To insert a Flexigrid table in the document, call

jQuery('#my_container').flexigrid({
    url:       (URL to fetch data from)
    dataType:  'json'|'xml',
    method:    'POST'|'GET',
    colModel:   [ {}, ... ],
    ....
});

... where '#my_container' is a jQuery selector specifying where the table should appear. See "Configuration Options" below for a list of available options.

colModel

The colModel option is an Array of objects that specifies the columns present in the table. Each object describes one column and should contain the following attributes:

display:   ...,
name:      ...,
width:     ...,
sortable:  false,
align:     'left'|'center'|'right'

Query Parameters for External Data Sources

When loading rows from an external data source, Flexigrid will pass the following HTTP (GET / POST) parameters:

page:           (int)    Page number being requested
rp:             (int)    Number of rows requested (rows per page)
sortname:       (string) <name of column to sort the data by>
sortorder:      (string) 'asc'|'desc' (?)
query:          ??
qtype:          (string) 'name'     ??

JSON Data Source Format

Flexigrid expects a JSON data source to return a JSON object in a format like below.

Properties that should be present in the 'cell' objects depend on the colModel option passed in Flexigrid initialization (see above).

{
    "page":    1,
    "total":  239,
    "rows":   [
                 {
                     "id": "ZW",
                     "cell": {
                         "name":           "Zimbabwe",
                         "iso":            "ZW",
                         "printable_name": "Zimbabwe",
                         "iso3":           "ZWE",
                         "numcode":        "716"
                     }
                 },

                 {
                     "id": "ZM",
                     "cell":{
                         "name":           "Zambia",
                         "iso":            "ZM",
                         "printable_name": "Zambia",
                         "iso3":           "ZMB",
                         "numcode":        "894"
                     }
                 },

                 {
                     "id": "YE",
                     "cell":{
                         "name":           "Yemen",
                         "iso":"YE",
                         "printable_name": "Yemen",
                         "iso3":           "YEM",
                         "numcode":"887"
                     }
                 }
    ]
}

XML Data Source Format

....

<rows>
  <page>2</page>
  <total>239</total>
  <row id='AZ'>
     <cell><![CDATA[AZ]]></cell>
     <cell><![CDATA[Azerbaijan]]></cell>
     <cell><![CDATA[Azerbaijan]]></cell>
     <cell><![CDATA[AZE]]></cell>
     <cell><![CDATA[31]]></cell>
  </row>
  <row id='BA'>
    <cell><![CDATA[BA]]></cell>
    <cell><![CDATA[Bosnia and Herzegovina]]></cell>
    <cell><![CDATA[Bosnia and Herzegovina]]></cell>
    <cell><![CDATA[BIH]]></cell>
    <cell><![CDATA[70]]></cell>
  </row>
  ....
</rows>

Configuration options

Part 1

These are the configuration options, their default values and descriptions as found in flexigrid.js. Based on the example code on http://flexigrid.info/, it appears this list is not exhaustive. The code is reformatted for readability.

    height:          200,                // default height
    width:           'auto',             // auto width
    striped:         true,               // apply odd even stripes
    novstripe:       false,
    minwidth:        30,                 // min width of columns
    minheight:       80,                 // min height of columns
    resizable:       true,               // allow table resizing
    url:             false,              // URL if using data from AJAX
    method:          'POST',             // data sending method
    dataType:        'xml',              // type of data for AJAX, either xml or json
    errormsg:        'Connection Error',
    usepager:        false,
    nowrap:          true,
    page:            1,                     // current page
    total:           1,                     // total pages
    useRp:           true,                  // use the results per page select box
    rp:              15,                    // results per page
    rpOptions:       [10, 15, 20, 30, 50],  // allowed per-page values
    title:           false,
    idProperty:      'id',
    pagestat:        'Displaying {from} to {to} of {total} items',
    pagetext:        'Page',
    outof:           'of',
    findtext:        'Find',
    params:          [],                    // allow optional parameters to be passed around
    procmsg:         'Processing, please wait ...',
    query:           '',
    qtype:           '',
    nomsg:           'No items',
    minColToggle:    1,                     // minimum allowed column to be hidden
    showToggleBtn:   true,                  // show or hide column toggle popup
    hideOnSubmit:    true,
    autoload:        true,
    blockOpacity:    0.5,
    preProcess:      false,
    addTitleToCell:  false,                 // add a title attr to cells with truncated contents
    dblClickResize:  false,                 // auto resize column by double clicking
    onDragCol:       false,
    onToggleCol:     false,
    onChangeSort:    false,
    onDoubleClick:   false,
    onSuccess:       false,
    onError:         false,
    onSubmit:        false,                 // using a custom populate function

Part 2

Additional configuration options that flexigrid seems to understand colModel: {}, showTableToggleBtn: ?? sortname: ?? sortorder: ??