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

Getting Started:

• 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

Advertisements