PERGOLA LOGO

DataGrid

View as standalone SVG

pergola.DataGrid has these features:

Note: Edit menu, Undo, and shortcuts are not yet implemented. Saving files is disabled in the demo version; to test saving, place the work on your server.

Data types are "string", "number", "date", and "boolean" (the latter with optional visual strings). "date" and "number" type columns are formatted–optionally and independently– to locale with options (using the Intl object where available). Note: Safari (up to version 5.1.7) does not implement locale formatting options. Note also that trailing decimal zeros in numbers representing currencies only show in IE (seemingly correct).

When editing a formatted field of type "number", its value is replaced by a JavaScript Number (as string representation) that you can edit as JavaScript Number. On validation, the input value is automatically reformatted. Learn more about the new extensions and the format property of the pergola.Input class.

When editing a formatted field of type "date", its value is replaced by the "" empty string; you can then enter the new date as valid date parameter for the Date constructor. The allowed input formats are ISO and RFC (note that Number parameters or milliseconds are not considered, and the input value will not be formatted). On validation, the input value (in ISO or RFC format) is automatically reformatted. If you don't want dates to be formatted, set the column's type to "string". Learn more about the new extensions and the format property of the pergola.Input class.

Note: Firefox and Opera currently use some common typing keys for shortcuts, without control or command keys (read why this is abusive in the Keyboard Class article, section Browsers’ Oddities, in the October 2014 issue of SVG magazine). Contrary to Pergola's development policy, the pergola.Key class implements workarounds to cope with browsers' typing idiosyncrasies/inconsistencies.

The grid in the example contains 1800 cells (1600 editable, 3 locale formatted columns, 1 boolean formatted column). All datagrid objects can have all the available features–this and that, rather than this or that. In readOnly mode the cells are not editable.

HOW

A datagrid is wrapped in a window, therefore you must first create a pergola.Window object in the usual manner, specifying the "datagrid" type, and then invoke its datagridMaker() method:

The binding property represents a URL string pointing to a JSON resource (in remote mode), or a JavaScript object literal (local or remote mode). The native saving format is JSON.

Learn how to manually edit a JavaScript object literal to produce a JSON file in the Tutorial.

A sample JSON object:

Learn more in the DATAGRID section of the Tutorial.