Skip to content
JavaScript C# Shell
Find file
Pull request Compare This branch is 60 commits ahead, 378 commits behind mleibman:master.
Failed to load latest commit information.
build - CHANGED: updated to version 2 of jquery.event.drag (http://threedub… Jul 6, 2010
css/smoothness Updated jQuery to 1.4.3 and uQueryUI to 1.8.5. Oct 18, 2010
examples Renamed example HTML file. Mar 23, 2011
images Removed sortLib in favor of new combined filtering/sorting dataView. … Mar 23, 2011
lib Removed sortLib in favor of new combined filtering/sorting dataView. … Mar 23, 2011
tests Merge branch 'resolver-dirigible' Oct 22, 2010
.gitignore Added .DS_Store to .gitignore Oct 28, 2010
MIT-LICENSE.txt Added an explicit license (MIT). Jan 21, 2010
README.markdown Added alwaysDisplay SlickGrid column property. Jun 27, 2011
init.js Added "default filtering" functionality to SlickGrid. Jun 27, 2011
slick.columnpicker.css Removed sortLib in favor of new combined filtering/sorting dataView. … Mar 23, 2011
slick.columnpicker.js Added alwaysDisplay SlickGrid column property. Jun 27, 2011
slick.editors.js - FIXED: corrected variable reference in YesNoSelectCellEditor Oct 7, 2010
slick.filter.js Added id and class names to facilitate testing. Jun 27, 2011
slick.grid.css Minor CSS update, code cleanup Jun 27, 2011
slick.grid.js Added id and class names to facilitate testing. Jun 27, 2011
slick.model.js ~ 15% performance improvement in DataView.refresh(). Oct 22, 2010
slick.pager.css Fix pager icons to use a container so that ui-state-default/hover bac… Apr 21, 2010
slick.pager.js Parameterize closures to protect the $ alias for jQuery Apr 26, 2010
slick.remotemodel.js - FIXED: implemented support for truly unlimited number of rows (MASS… Jun 27, 2010
slick.session.js Added session handling plugin. Mar 2, 2011

README.markdown

Forked SlickGrid Documentation

Features added in this fork:

  • Session handling: Refreshing the page restores column visiibility, order, and default sort.
  • Filtering UI: Min/max ranges are determined automatically.
  • Rich sorting library: Sort algorithms are determined automatically.
  • Fixed totals rows: Can be updated with the Grid.setTotals() method. Filters update totals automatically. Can be displayed in footer and/or header.
  • UX improvements: Column reordering is updated in ColumnPicker. More natural dragging algorithm/threshold used.

See examples/example15-fork-feature-demo.html for a demo.

When and Where to Load SlickGrid

SlickGrids are initialized by pushing a definitions object onto the global "dataGrids" array, like so:

<script type="text/javascript">

    var my_slickgrid = {...};
    dataGrids.push(my_slickgrid);

    $(function() {
        // your jQuery code
    });

</script>

The dataGrids init process happens on jQuery's ready() event, which is why the following will not work:

<script type="text/javascript">

    var my_slickgrid = {...};

    $(function() {
        // This won't work!
        dataGrids.push(my_slickgrid);
    });

</script>

Column Definitions:

  • name - Required. Column name to put in the header.
  • field - Property of the data context to bind to. If missing, this will use the column ID, or the column name.
  • id - Column ID. If missing, this will use the column field, or the column name.
  • toolTip - Tooltip (if different from name).
  • width - Width of the column in pixels.
  • minWidth - Minimum allowed column width for resizing.
  • maxWidth - Maximum allowed column width for resizing.
  • sortable - (default false) If true, the column can be sorted (onSort will be called).
  • forceSortType - Override automatic sort detection to use a particular sort type.
  • resizable - (default true) If false, the column cannot be resized. Should be used sparingly.
  • cssClass - A CSS class to add to the cell.
  • visible - (default true) If false, the column will be hidden by default, to be made available in a ColumnPicker or other UI element.
  • filter - Which filter method to use for filtering this column. Currently can be set to "text" or "range".
  • presets - An array containing the human-readable column preset(s) this column is part of. "Default" and "All Columns" are implied, assuming showColumnPresets is true.
  • total - (default 'sum') Used to determine how totals are calculated. Currently can only be set to "sum" or "average".
  • formatter - (default 'return value || ""') Function responsible for rendering the contents of a cell. Signature: function formatter(row, cell, value, columnDef, dataContext) { ... return "..."; }
  • editor - An Editor class.
  • validator - An extra validation function to be passed to the editor.
  • unselectable - If true, the cell cannot be selected (and therefore edited).
  • cannotTriggerInsert - If true, a new row cannot be created from just the value of this cell.
  • rerenderOnResize - Rerender the column when it is resized (useful for columns relying on cell width or adaptive formatters).
  • asyncPostRender - Function responsible for manipulating the cell DOM node after it has been rendered (called in the background).
  • behavior - Configures the column with one of several available predefined behaviors: "select", "move", "selectAndMove".
  • defaultToAscending - (default true) If false, the column sorting will default to descending.
  • alwaysDisplay - (default false) If true, the column will not appear in the ColumnPicker and will always be displayed on all presets.

Usage Example #1, no AJAX

<script type="text/javascript">

    var my_slickgrid = {
        id: 'mySlickGrid',          // a unique ID for this table, for session handling.
        container: '#slickgrid',    // the existing DOM element that will contain the datagrid. Should have width and height set.
        options: {
            grid: {
                rowHeight: 21,
                defaultMinWidth: 80,
                defaultColumnWidth: 120,
            }
        },
        columns: [
            { name: 'Date', sortable: true, minWidth: 90, defaultSort: 'descending' },
            { name: 'City', filter: 'text', sortable: true, minWidth: 100 },
            { name: 'Clicks', filter: 'range', sortable: true, width: 62 },
            { name: 'CTR', filter: 'range', sortable: true, visible: false, width: 62 }
        ],
        // empty cells don't need to be included in totals
        totals: {
            clicks: Math.round(Math.random() * 1000),
            ctr: Math.round(Math.random() * 100) + '%'
        },
        // data needs to be an array of objects. Each object needs a unique 'id'.
        data: [
            { id: 0, date: '12/24/2007', city: 'Philadelphia', clicks: 1238, ctr: '45%' },
            { id: 1, date: '12/28/2007', city: 'Miami', clicks: 675, ctr: '7%' },
            { id: 2, date: '12/29/2007', city: 'Los Angeles', clicks: 1234, ctr: '1%' },
            { id: 3, date: '11/12/2008', city: 'Boston', clicks: 16, ctr: '99%' }
        ]
    });

    dataGrids.push(my_slickgrid);

</script>

Usage Example #2: loading data in later with AJAX (recommended)

<script type="text/javascript">

    var my_slickgrid = {
        id: 'demoTable',            // a unique ID for this table, for session handling.
        container: '#slickgrid',    // the existing DOM element that will contain the datagrid. Should have width and height set.
        options: {
            grid: {
                rowHeight: 21,
                defaultMinWidth: 80,
                defaultColumnWidth: 120,
            }
        },
        columns: [
            { name: 'Date', sortable: true, minWidth: 90, defaultSort: 'descending' },
            { name: 'City', filter: 'text', sortable: true, minWidth: 100 },
            { name: 'Clicks', filter: 'range', sortable: true, width: 62 },
            { name: 'CTR', filter: 'range', sortable: true, visible: false, width: 62 }
        ],
        // These should be included anyway:
        totals: {},
        data: []
    };

    dataGrids.push(my_slickgrid);

    $(function() {
        $.getJSON('/path/to/ajax', function(data) {
            my_slickgrid.data = data.data;
            my_slickgrid.totals = data.totals;

            my_slickgrid.View.setItems(my_slickgrid.data);
            my_slickgrid.Grid.setTotals(my_slickgrid.totals);
        });
    });

</script>

This example assumes your AJAX call returns both totals and data in a single JSON object:

{
    "totals": {
        "clicks": 2345, "ctr": "4%"
    },
    "data": [
        { "id": 0, "date": "12/24/2007", "city": "Philadelphia", "clicks": 1238, "ctr": "45%" },
        { "id": 1, "date": "12/28/2007", "city": "Miami",        "clicks": 675,  "ctr": "63%" },
        { "id": 2, "date": "12/29/2007", "city": "Los Angeles",  "clicks": 1234, "ctr": "11%" },
        { "id": 3, "date": "11/12/2008", "city": "Boston",       "clicks": 16,   "ctr": "99%" }
    ]
}

If you don't need to display totals, you could just return the data array as JSON:

[
    { "id": 0, "date": "12/24/2007", "city": "Philadelphia", "clicks": 1238, "ctr": "45%" },
    { "id": 1, "date": "12/28/2007", "city": "Miami",        "clicks": 675,  "ctr": "63%" },
    { "id": 2, "date": "12/29/2007", "city": "Los Angeles",  "clicks": 1234, "ctr": "11%" },
    { "id": 3, "date": "11/12/2008", "city": "Boston",       "clicks": 16,   "ctr": "99%" }
]

And then update your SlickGrid like so:

$(function() {
    $.getJSON('/path/to/ajax', function(data) {
        my_slickgrid.data = data;
        my_slickgrid.View.setItems(my_slickgrid.data);
    });
});
Something went wrong with that request. Please try again.