slickgrid
Developer Fusion: “SlickGrid takes a different approach. In the simplest scenario, it accesses data through an array interface (i.e. using “dataitem” to get to an item at a given position and “data.length” to determine the number of items), but the API is structured in such a way that it is very easy to make the grid react to any possible changes to the underlying data. ”
var columns = [
{id:”playerID”, name:”Player ID”, field:”playerId”, width:116, focusable:false, selectable:true, sortable:true ,formatter: playerDesclink},
{id:”description”, name:”Description”, field:”shortDescription”, width:439, focusable:false, selectable:true, sortable:false}
];
Column definition options:
Column definition option | Description | Default |
id | Column ID. | – |
name | Column name to put in the header. | – |
field | Property of the data context to bind to. | – |
formatter | Function responsible for rendering the contents of a cell. | defaultFormatter |
editor | An Editor class responsible for editing the value of a cell. | – |
validator | An extra validation function to be passed to the editor. | – |
unselectable | If true, the cell cannot be selected (and therefore edited). | false |
cannotTriggerInsert | If true, a new row cannot be created from just the value of this cell. | false |
setValueHandler | A custom function to be called to set field value instead of setting contextfield | – |
width | Width of the column in pixels. | Options.defaultColumnWidth |
resizable | If false, the column cannot be resized. | true |
minWidth | Minimum allowed column width for resizing. | – |
maxWidth | Maximum allowed column width for resizing. | – |
cssClass | A CSS class to add to the cell. | – |
rerenderOnResize | Rerender the column when it is resized (useful for columns relying on cell width or adaptive formatters). | false |
var options = {
editable: false,
enableAddRow: false,
enableCellNavigation: false,
asyncEditorLoading: false,
forceFitColumns: true,
enableColumnReorder:false,
fullWidthRows: true
};
Options:
Options | Description | Default |
enableAddRow | If true, a blank row will be displayed at the bottom – typing values in that row will add a new one. | true |
manualScrolling | Disable automatic rerender on scroll. Client will take care of calling SlickGrid.scroll(). | false |
editable | If false, no cells will be switched into edit mode. | true |
editOnDoubleClick | Cells will be switched into edit mode on double-click instead of a single click. Single click will select a cell. | false |
enableCellNavigation | If false, no cells will be selectable. This also disables editing. | true |
defaultColumnWidth | Default column width in pixels. | 80 |
enableColumnReorder | Allows the user to reorder columns. | true |
asyncEditorLoading | Makes cell editors load asynchronously after a small delay. This greatly increases keyboard navigation speed. | true |
API :
- DataView (i.e. model or dataprovider) provides useful features that the grid doesnt have
# var dataView = new Slick.Data.DataView({ inlineFilters: true });
dataView.beginUpdate();
dataView.setItems(data);
dataView.setFilter(myFilter);
dataView.endUpdate();
- Grid
# var grid = new Slick.Grid(“#myGrid”, dataView, columns, gridOptions);
- Grid: https://github.com/mleibman/SlickGrid/wiki/Grid-Option
- Column: https://github.com/mleibman/SlickGrid/wiki/Column-Options
- Events: https://github.com/mleibman/SlickGrid/wiki/Grid-Events
- Custom Cell Editors: https://github.com/mleibman/SlickGrid/wiki/Writing-custom-cell-editors
- https://groups.google.com/forum/#!forum/slickgrid
- endertech “Before continuing, I’d recommend you review the examples to get a feel for the true power and capabilities of this grid. No other grid can compare to what SlickGrid has to offer.”
- jquery-slick-grid-java-integration
http://alivedise.github.io/blog/2012/02/09/slickgrid-api-list/
https://github.com/mleibman/SlickGrid/wiki/API-Reference
http://joeriks.com/2011/07/03/a-first-look-at-slickgrid-with-read-and-update-in-webmatrix/
http://blogs.neudesic.com/post/2012/05/07/Slickgrid-Currency-Column-Formatter.aspx