TechnoBuzz

A Techno Blog, mainly about Java

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);

Getting Started:

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

June 16, 2013 Posted by | Web Design | Leave a comment