surge.slickGrid.js

Summary

surge.slickGrid.js
surge.slickGrid	Wraps the SlickGrid component in a jQuery UI widget interface.
Editing and Formatting	Cell editing and formatting.
Events
gridselectionchange	Fired when the grid selection changes.
gridcellchange	Fired when an editable grid cell is modified.
gridaddnewrow	Fired when a new row is about to be added to an editable grid.
gridbeforecelledit	Fired before a cell enters edit mode.
gridrowmove	Fired when a row is moved using the special column “reorderColumn”.
gridcellclick	Fired when a cell is clicked.
griddataupdate	This event is triggered anytime .data is called with new data.
gridtextsearch	This event is triggered by the application, not by the platform, to cause text based searching across the grid.
gridfilterdata	Anytime the data is being filtered, which happens with all calls to .data(newData), this event will be triggered to allow for the application to filter the data.
slickGrid jQuery Ui Widget	jQuery Ui Widget wrapping the SlickGrid tool.
specialColumn	Return the column overrides expressed by the special column mechanism.
grid	Fetch the widget’s underlying grid object
resize	Recalculate the widget’s size.
data	Get or set the data the underlying grid is bound to.
selection	Get the currently selected rows as tracked by the underlying SlickGrid
rowCount	Get the amount of rows currently in the grid
Surge.SlickGrid.JSONDataSource	Provides incrementally loaded data from a JSON data service into a grid.
Properties
Url	A string specifying the URL from which to load data.
Method	HttpMethod with which to make the request to the server
IsJSON	Whether the query paramters should be sent in JSON format.
QueryParameters	Optional.
Functions
bind	Binds the data source to a grid.
refreshData	Refresh the current view of the data from the server.
loadData	Load data a range of from the server
Surge.SlickGrid
Functions
HiddenFormatter	Formatter which returns nothing.
TimeRangeFormatter	Formatter function which presents time ranges in a grid.
TimeFormatter	Formatter function which presents time values in a grid.
DateFormatter	Grid formatter that will format the value in an appropriate date format.
DateFormatter	Grid formatter that will format the value in an appropriate long-form (written out) date format.
DateFormatter	Grid formatter that will format the value in an appropriate date format.
YesNoCellFormatter	Display value as “Yes” or “No” Originally from slickGrid Sample Editors.
Surge.SlickGrid.CellEditor	Base class for SlickGrid cell editors.
Properties
Grid	The grid with which this cell editor is associated.
Container	The container into which the cell editor UI is rendered.
Column	The column definition for the cell which is being edited.
Item	The data row for the cell which is being edited.
Functions
_initialize	This method initializes the UI for the cell editor.
destroy	Removes all UI elements associated with the cell editor.
focus	Called by the grid to set focus on the cell editor’s main editing element.
isValueChanged	Returns true if the value has been changed by the user since editing began.
serializeValue	Returns a serialized value for the cell.
loadValue	Loads the cell value from the underlying data item into the editor.
applyValue
validate
Surge.SlickGrid.TimeEditor	A cell editor which allows the user to edit a time value.
Surge.SlickGrid.DateEditor	Provides nice datetime widget for editing slickgrid dates.
Surge.SlickGrid.TimeRangeEditor	A cell editor which allows the user to edit a time range.
Functions
TextCellEditor	Edit field with an text input.
LongTextCellEditor	An example of a “detached” editor.
YesNoCheckboxCellEditor	Edit a boolean value with a checkbox.
CheckboxCellEditor	Edit a boolean value with a checkbox.
FloatCellEditor	Edit a floating point value with an input dialog that limits input to numerical values only.
CurrencyCellEditor	Edit a numerical value as a standard 2-digit floating value Originally from SlickGrid Sample Editors.
IntegerCellEditor	Edit a value with a text input that doesn’t allow non-textual input.
$.surge.slickGrid
Variables
formatters	These are aliases for formatters that can easily be set up and referenced throughout your project in markup rather than having to use the fully qualified object name Currently available date, time, timeRange, hidden, 2decimal
specialColumns	The following are currently implemented values for the data-special tag.

surge.slickGrid

Wraps the SlickGrid component in a jQuery UI widget interface. Provides additional support for features like header and footer templates and declarative columns.

Example

<div class="my-grid" data-widget="slickGrid" data-options="forceFitColumns: true">
  <table>
    <tr>
      <th data-id="Id">Identifier</th>
      <th data-id="Name">Name</th>
    </tr>
  </table>
</div>

<script type="text/javascript">
  $.viewReady(function() {
    $(".my-grid", this).slickGrid("data", [
      { Id: 1, Name: "Foo" },
      { Id: 2, Name: "Bar" }
    ]);
  });
</script>

Declarative Columns

The slickGrid widget supports markup-based declaration of grid columns in lieu of JS-based configuration. The above example uses the most basic possible configuration - table headers with a data-id attribute. The data-id attribute, by default, specifies both the internal ID of the column used by SlickGrid and the field on the supplied data array which the value will be pulled from. Other available options include:

data-formatter	A JavaScript expression which should evaluate to a function. This function will be used to format the model value for display.
data-editor	The editor to use when inline editing is enabled for this column.
data-field	The model field which should be used instead of data-id to populate the value of this column.
data-width	The width of the column in pixels.
data-special	The name of a special column type. This is just a simple facade for common types of ui and overrides other options. See $.surge.slickGrid.specialColumns.
data-sortable	True or false. Enables sorting for the column. Note that SlickGrid does not actually implement a sorting algorithm, this will only adjust styling and trigger the ‘gridsort’ event when the column header is clicked.
data-onCellChange	(default undefined) The name of an event handler function to call when the cell’s value changes. The function receives a single argument containing the same data as the ‘ui’ object for the gridcellchange event.
data-onCellClick	(default undefined) The name of an event handler function to call when the cell is clicked. The function receives a single argument containing the same data as the ‘ui’ object for the gridcellclick event.
data-template	(default undefined) A jQuery selector for a template. If present, this template will be used to format cell contents for the column. A template is just a special case of a formatter and so its presence of a template overrides the precense of a formatter. In addition, it stands to notice that SlickGrid does not size rows automatically, you might have to use the rowHeight option if your template forces the row to be higher than a single line.

Options

rowHeight	(default 25px) Row height in pixels.
enableAddRow	(default false) If true, a blank row will be displayed at the bottom - typing values in that row will add a new one.
leaveSpaceForNewRows	(default false)
editable	(default false) If false, no cells will be switched into edit mode.
autoEdit	(default true) Cell will not automatically go into edit mode when selected.
enableCellNavigation	(default true) If false, no cells will be selectable.
enableCellRangeSelection	(default false) If true, user will be able to select a cell range. onCellRangeSelected event will be fired.
defaultColumnWidth	(default 80px) Default column width in pixels (if columns[cell].width is not specified).
enableColumnReorder	(default true) Allows the user to reorder columns.
asyncEditorLoading	(default false) Makes cell editors load asynchronously after a small delay. This greatly increases keyboard navigation speed.
asyncEditorLoadDelay	(default 100msec) Delay after which cell editor is loaded. Ignored unless asyncEditorLoading is true.
forceFitColumns	(default false) Force column sizes to fit into the viewport (avoid horizontal scrolling).
enableAsyncPostRender	(default false) If true, async post rendering will occur and asyncPostRender delegates on columns will be called.
asyncPostRenderDelay	(default 60msec) Delay after which async post renderer delegate is called.
autoHeight	(default false) If true, vertically resizes to fit all rows.
editorLock	(default Slick.GlobalEditorLock) A Slick.EditorLock instance to use for controlling concurrent data edits.
showSecondaryHeaderRow	(default false) If true, an extra blank (to be populated externally) row will be displayed just below the header columns.
secondaryHeaderRowHeight	(default 25px) The height of the secondary header row.
syncColumnCellResize	(default false) Synchronously resize column cells when column headers are resized
rowCssClasses	(default null) A function which (given a row’s data item as an argument) returns a space-delimited string of CSS classes that will be applied to the slick-row element. Note that this should be fast, as it is called every time a row is displayed.
cellHighlightCssClass	(default “highlighted”) A CSS class to apply to cells highlighted via setHighlightedCells().
cellFlashingCssClass	(default “flashing”) A CSS class to apply to flashing cells (flashCell()).
formatterFactory	(default null) A factory object responsible to creating a formatter for a given cell. Must implement getFormatter(column).
editorFactory	(default null) A factory object responsible to creating an editor for a given cell. Must implement getEditor(column).
multiSelect	(default false) Enable multiple row selection.
columns	An array of column definitions. Generally, in platform applications, the declarative column syntax should be used instead.
data	The data source for the grid. This should be an array of rows that matches the format specified by your column definitions.
noSearch	(default false) Prevents this column from being included in gridtextsearch if set to true.
headerTmpl	jQuery selector for jQuery Template that will produce the grid header. Requires <surge.jQuery.templates>
headerTmpl	jQuery selector for jQuery Template that will produce the grid footer. Requires <surge.jQuery.templates>

Summary

Editing and Formatting	Cell editing and formatting.
Events
gridselectionchange	Fired when the grid selection changes.
gridcellchange	Fired when an editable grid cell is modified.
gridaddnewrow	Fired when a new row is about to be added to an editable grid.
gridbeforecelledit	Fired before a cell enters edit mode.
gridrowmove	Fired when a row is moved using the special column “reorderColumn”.
gridcellclick	Fired when a cell is clicked.
griddataupdate	This event is triggered anytime .data is called with new data.
gridtextsearch	This event is triggered by the application, not by the platform, to cause text based searching across the grid.
gridfilterdata	Anytime the data is being filtered, which happens with all calls to .data(newData), this event will be triggered to allow for the application to filter the data.
slickGrid jQuery Ui Widget	jQuery Ui Widget wrapping the SlickGrid tool.
specialColumn	Return the column overrides expressed by the special column mechanism.
grid	Fetch the widget’s underlying grid object
resize	Recalculate the widget’s size.
data	Get or set the data the underlying grid is bound to.
selection	Get the currently selected rows as tracked by the underlying SlickGrid
rowCount	Get the amount of rows currently in the grid

Editing and Formatting

Cell editing and formatting.

The grid supports a spreadsheet-like editing mode as well as custom formatting for cell values through the column definitions’ editor and formatter properties. To use this functionality, simply set the data-editor or data-formatter attribute on a column definition to the name of an editor or formatter, respectively. To use edit mode, you must also enable the editable, and optionally, enableAddRow options on the grid itself.

Some formatters and editors support their own configuration options. See the specific documentation for those classes for details.

Example

<div class="editors-grid" data-widget="slickGrid" data-options="forceFitColumns: true, editable: true, enableAddRow: true">
  <table>
      <tr>
          <th data-id="Name" data-editor="TextCellEditor">
              Name
          </th>
          <th data-id="Birthdate" data-editor="Surge.SlickGrid.DateEditor" data-formatter="Surge.SlickGrid.DateFormatter" data-onCellChange="SomeHandler">
              Birthdate
          </th>
          <th data-id="TakesLunchAt" data-editor="Surge.SlickGrid.TimeEditor" data-formatter="Surge.SlickGrid.TimeFormatter">
              Takes Lunch At
          </th>
          <th data-id="StartWork,EndWork" data-editor="Surge.SlickGrid.TimeRangeEditor" data-formatter="Surge.SlickGrid.TimeRangeFormatter">
              Workday
          </th>
      </tr>
  </table>
</div>

Visibility and Resizing

SlickGrid relies on layout calculations that depend on its size, and thus when resizing or showing a previously hidden grid, you must update the grid’s dimensions using SlickGrid’s .resizeCanvas() and .autosizeColumns() methods.

<div style="display: none">
  <div class=my-grid data-widget=slickGrid>
    <table>
      <tr>
        <th data-id=Name>Name</th>
        <th data-id=DateOfBirth>DOB</th>
        <th data-id=NumberOfZombiesSlain>Zombies</th>
    </table>
  </div>
</div>

<script>
  $.viewReady(function() {
    $('.my-grid')
         .parents(':hidden')
             .fadeIn('slow')
         .end()
     .slickGrid('resize');
  });
</script>

Events

gridselectionchange

Fired when the grid selection changes. Example:

(based on the summary example)

$.viewReady(function() {
  $(".my-grid", this).bind("gridselectionchange", function () {
    _log("Row # " + $(this).slickGrid("selection") + " was selected.");
  });
});

gridcellchange

Fired when an editable grid cell is modified.

Parameters

e	The jQuery event object. Always null for this event.
ui	An object with two properties, row and cell, specifying the indexes of the row and cell that changed.

gridaddnewrow

Fired when a new row is about to be added to an editable grid. This event allows for preprocessing of the new data row before it is added to the grid.

Parameters

e	The jQuery event object. Always null for this event.
ui	Am object with two properties: item and columnDefinition. The item property contains the newly created data row which will be inserted into the grid’s data array. An event handler may set the ui.item property to replace the created item with a different row object. The columnDefinition property contains the column metadata for the cell in the creation row which the user edited.

Example

// based on summary example, assumes enableAddRow option has been turned on
$(".my-grid", this).bind("gridaddnewrow", function (e, ui) {
  // add some extra non-visible data to the new row.
  ui.item = $.extend({}, { hiddenField: 123 }, ui.item);
});

gridbeforecelledit

Fired before a cell enters edit mode. The handler may cancel the edit.

Parameters

e	The jQuery event object. Always null for this event.
ui	An object with four properties: row and cell give the row and cell indices for the cell to be edited; data gives the data for the row to be edited, and cancel is a flag which may be set to true by the handler to cancel the edit.

gridrowmove

Fired when a row is moved using the special column “reorderColumn”.

Parameters

e	The jQuery event object.
ui	An object with two properties: insertBefore and rows. The insertBefore property contains the index of the row after the moved row. The rows object is an array with the ID’s of the moved rows. At this time only 1 row can be moved at a time, so this property will contain one value, the ID of the moved row.

Example

// requires underscore jQuery library.
$(".my-grid", this).bind("gridrowmove", function (e, ui) {
     // Sets the Sequence property of the data elements
     _($(".my-grid", this).slickGrid("data")).each(function(e, i){ e.Sequence = i; });
});

gridcellclick

Fired when a cell is clicked.

Parameters

e	The jQuery event object.
ui	An object with two properties: cell and row. The “cell” property is the column index of the row clicked. The “row” property is the index of the row of the cell that was clicked.

Example

// requires underscore jQuery library.
$(".my-grid", this).bind("gridcellchange", function (event, ui) {
     var row = ui.row;
     var cell = ui.cell;
     var columns = $(".my-grid", this).slickGrid("grid").getColumns();
     var fieldName = columns[cell].field;
     var data = $(".my-grid", this).slickGrid("data");
     alert(data[row][fieldName]);
});

griddataupdate

This event is triggered anytime .data is called with new data. This includes any time the list is refiltered.

Parameters

e	The jQuery event object.

Example

// When ever the data is changed, make an element show "5 items" or "2 of 5 items" depending upon if items are filtered out or not.
$(".my-grid", this).bind("griddataupdate", function() {
 var filteredCount = pickList.slickGrid("rowCount", true);
 var count = pickList.slickGrid("rowCount");
 $(".my-grid-count", this).text(filteredCount == count ? (count + " items") : [filteredCount, "of", count, "items"].join(" "));
});

gridtextsearch

This event is triggered by the application, not by the platform, to cause text based searching across the grid. All defined columns are included that contain numerical or string based data, and do not set their noSearch option to true.

Parameters

e	The jQuery event object.
searchText	The text that is being searched.

Example

// This code is executing inside of the header, so triggering gridtextsearch on the textbox will cause it to bubble to the grid control.
$(".search", this).textboxHelperText("Search").bind("textchange", function() {
 $(this).trigger("gridtextsearch", $(this).val());
});

gridfilterdata

Anytime the data is being filtered, which happens with all calls to .data(newData), this event will be triggered to allow for the application to filter the data.

Parameters

e	The jQuery event object.
data	The data object to modify.

Example

// When ever the filter is being run, see if the checkbox .only-show-private is checked, if so, filter the data to
// only show items where the field "private" is set to true.
var myGrid = $(".my-grid", this).bind("gridfilterdata", function(e, data) {
 var onlyShowPrivate = $(".only-show-private", this).is(":checked");
 if (onlyShowPrivate) {
  data = _.select(data, function(item) { return item.private == true; });
 }
});

// Force the filters to update whenever the checkbox is changed.
$(".only-show-private", this).change(function() {
 myGrid.slickGrid("runFilters");
});

slickGrid jQuery Ui Widget

jQuery Ui Widget wrapping the SlickGrid tool.

var grid = $('div.the-grid').slickGrid(options),    // initializes widget
    underlyingGrid = grid.slickGrid('grid');        // invokes the 'grid' method to get the current grid
grid.data('data', newDataObject);                   // sets the widget instance's 'data' property (the data in the SlickGrid)

Depends on

specialColumn

specialColumn: function ( colType,
colFunction )

Return the column overrides expressed by the special column mechanism. See $.surge.slickGrid.specialColumns

grid

grid: function ()

Fetch the widget’s underlying grid object

resize

resize: function ()

Recalculate the widget’s size.

data

Get or set the data the underlying grid is bound to.

selection

selection: function ()

Get the currently selected rows as tracked by the underlying SlickGrid

rowCount

rowCount: function ( filtered )

Get the amount of rows currently in the grid

Surge.SlickGrid.JSONDataSource

Provides incrementally loaded data from a JSON data service into a grid. This allows extremely large data sets to be efficiently edited. To use the data source, you must set the Url and optionally the QueryParameters property, then call bind to associate the data source with your target grid.

Example

var dataSource = new Surge.SlickGrid.JSONDataSource();
dataSource.setUrl("/_surge/ReferenceCode/List");
dataSource.setQueryParameters({codeType: 4}); // retrieve states
dataSource.bind($(".my-grid"));

JSON Format

The data source expects the URL provided to accept certain query parameters and return data in a specific format. The service should accept the following as query parameters:

from	The start of the range of data to return, inclusive.
to	The end of the data range to return, exclusive.

It should return JSON data in the following format.

{
  TotalLength: 123, // total number of records in the set
  Data: [
    {property1: 1, property2: 2, ...}, ... // each data row
  ]
}

The returned Data elements in the array will be directly inserted into the grid’s data collection at the appropriate location.

Limitations

Incremental data loading may not currently be used in concert with row movement.
No cache eviction is performed, so once a row is loaded, it stays loaded forever.
SlickGrid viewport changes are not aggregated, so sometimes this class will make numerous requests for small amounts of data.

Depends On

<surge.core>
jQuery
SlickGrid

Summary

Properties
Url	A string specifying the URL from which to load data.
Method	HttpMethod with which to make the request to the server
IsJSON	Whether the query paramters should be sent in JSON format.
QueryParameters	Optional.
Functions
bind	Binds the data source to a grid.
refreshData	Refresh the current view of the data from the server.
loadData	Load data a range of from the server

Properties

Url

A string specifying the URL from which to load data.

Method

HttpMethod with which to make the request to the server

IsJSON

Whether the query paramters should be sent in JSON format.

QueryParameters

Optional. A dictionary of additional query parameters to be passed to the data service.

Functions

bind

bind: function ( target,
targetCtx )

Binds the data source to a grid. Target should be a DOM element, jQuery object, or selector that identifies an instance of the surge.slickGrid jQuery UI widget. This method will not accept a raw Slick.Grid instance.

refreshData

refreshData: function ()

Refresh the current view of the data from the server. Useful if one of the properties has changed.

$('input[name=search]').keyup(function () {
 dataSource.setQueryParameters({ search: this.value });
 dataSource.refreshData();
});

loadData

loadData: function ( from,
to )

Load data a range of from the server

Parameters

from
to

Surge.SlickGrid

Summary

Functions
HiddenFormatter	Formatter which returns nothing.
TimeRangeFormatter	Formatter function which presents time ranges in a grid.
TimeFormatter	Formatter function which presents time values in a grid.
DateFormatter	Grid formatter that will format the value in an appropriate date format.
DateFormatter	Grid formatter that will format the value in an appropriate long-form (written out) date format.
DateFormatter	Grid formatter that will format the value in an appropriate date format.
YesNoCellFormatter	Display value as “Yes” or “No” Originally from slickGrid Sample Editors.

Functions

HiddenFormatter

HiddenFormatter: function ( row,
cell,
value,
columnDef,
dataContext )

Formatter which returns nothing.

TimeRangeFormatter

TimeRangeFormatter: function ( row,
cell,
value,
columnDef,
dataContext )

Formatter function which presents time ranges in a grid. This formatter expects two fields, both integers specifying milliseconds since midnight, which form a range of time. The two fields are specified by setting the column’s field to a comma-separated string, e.g. data-field=”MyTimeStart,MyTimeEnd”. The string must not contain spaces.

Depends On

jQuery.globalize

TimeFormatter

TimeFormatter: function ( row,
cell,
value,
columnDef,
dataContext )

Formatter function which presents time values in a grid. Time is stored as an integer in milliseconds since midnight.

Depends On

jQuery.globalize

DateFormatter

DateFormatter: function ( row,
cell,
value,
columnDef,
dataContext )

Grid formatter that will format the value in an appropriate date format.

Depends On

jQuery.globalize

DateFormatter

LongDateFormatter: function ( row,
cell,
value,
columnDef,
dataContext )

Grid formatter that will format the value in an appropriate long-form (written out) date format.

Depends On

jQuery.globalize

DateFormatter

Grid formatter that will format the value in an appropriate date format.

YesNoCellFormatter

YesNoCellFormatter: function ( row,
cell,
value,
columnDef,
dataContext )

Display value as “Yes” or “No” Originally from slickGrid Sample Editors.

Surge.SlickGrid.CellEditor

Base class for SlickGrid cell editors. For information on how to use cell editors, see surge.slickGrid.

When an editor is specified for a grid column, and the grid’s editable option is enabled, an instance of the editor is created when the user enters edit mode on a grid cell. The editor manages all of the interaction logic for that cell edit operation, including loading and saving the data from the underlying row, as well as managing UI elements.

Cell editors have a well defined lifecycle. [[TBD]]

Summary

Properties
Grid	The grid with which this cell editor is associated.
Container	The container into which the cell editor UI is rendered.
Column	The column definition for the cell which is being edited.
Item	The data row for the cell which is being edited.
Functions
_initialize	This method initializes the UI for the cell editor.
destroy	Removes all UI elements associated with the cell editor.
focus	Called by the grid to set focus on the cell editor’s main editing element.
isValueChanged	Returns true if the value has been changed by the user since editing began.
serializeValue	Returns a serialized value for the cell.
loadValue	Loads the cell value from the underlying data item into the editor.
applyValue
validate

Properties

Grid

The grid with which this cell editor is associated.

Container

The container into which the cell editor UI is rendered. Subclasses should create their UI inside this container.

Column

The column definition for the cell which is being edited.

Item

The data row for the cell which is being edited.

Functions

_initialize

_initialize: function ()

This method initializes the UI for the cell editor. It should be overridden by all subclasses. It is called immediately when the cell editor is created, after initializing its basic properties.

destroy

destroy: function ()

Removes all UI elements associated with the cell editor. Subclasses should remove their UI from the DOM in this method.

focus

focus: function ()

Called by the grid to set focus on the cell editor’s main editing element. This should focus the primary control which the user will be manipulating.

isValueChanged

isValueChanged: function ()

Returns true if the value has been changed by the user since editing began. If false, no changes will be made to the underlying data object.

serializeValue

serializeValue: function ()

Returns a serialized value for the cell. This may be any object, so long as applyValue is able to use it to apply changes to the underlying data object. Note that this value may be used after the cell editor’s UI is destroyed, so it must not be dependent upon any UI element.

loadValue

loadValue: function ( item )

Loads the cell value from the underlying data item into the editor. This method should populate the cell editor’s UI with data from the row.

applyValue

applyValue: function ( item,
state )

validate

validate: function ()

Surge.SlickGrid.TimeEditor

A cell editor which allows the user to edit a time value. The time is stored as an integer in milliseconds since midnight.

Surge.SlickGrid.DateEditor

Provides nice datetime widget for editing slickgrid dates. Expects dates to be in the format of new Date.getTime() (milliseconds since Jan 1 1970) but will work ok with date as a string or Date object.

Depends On

Surge.SlickGrid.TimeRangeEditor

A cell editor which allows the user to edit a time range. This editor expects two fields on the row object, both integers specifying milliseconds since midnight, which form a range of time. The two fields are specified by setting the column’s field property to a comma-separated string, e.g. data-field=”MyTimeStart,MyTimeEnd”. The string must not contain spaces.

Summary

Functions
TextCellEditor	Edit field with an text input.
LongTextCellEditor	An example of a “detached” editor.
YesNoCheckboxCellEditor	Edit a boolean value with a checkbox.
CheckboxCellEditor	Edit a boolean value with a checkbox.
FloatCellEditor	Edit a floating point value with an input dialog that limits input to numerical values only.
CurrencyCellEditor	Edit a numerical value as a standard 2-digit floating value Originally from SlickGrid Sample Editors.
IntegerCellEditor	Edit a value with a text input that doesn’t allow non-textual input.

Functions

TextCellEditor

TextCellEditor: function ( args )

Edit field with an text input. Originally from SlickGrid Sample Editors.

LongTextCellEditor

LongTextCellEditor: function ( args )

An example of a “detached” editor. The UI is added onto document BODY and .position(), .show() and .hide() are implemented. KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter. Originally from SlickGrid Sample Editors.

YesNoCheckboxCellEditor

YesNoCheckboxCellEditor: function ( args )

Edit a boolean value with a checkbox. Originally from SlickGrid Sample Editors.

CheckboxCellEditor

CheckboxCellEditor: function ( args )

Edit a boolean value with a checkbox. Originally from SlickGrid Sample Editors.

FloatCellEditor

FloatCellEditor: function ( args )

Edit a floating point value with an input dialog that limits input to numerical values only. Originally from SlickGrid Sample Editors.

CurrencyCellEditor

CurrencyCellEditor: function ( args )

Edit a numerical value as a standard 2-digit floating value Originally from SlickGrid Sample Editors.

IntegerCellEditor

IntegerCellEditor: function ( args )

Edit a value with a text input that doesn’t allow non-textual input. Originally from SlickGrid Sample Editors.

$.surge.slickGrid

Summary

Variables
formatters	These are aliases for formatters that can easily be set up and referenced throughout your project in markup rather than having to use the fully qualified object name Currently available date, time, timeRange, hidden, 2decimal
specialColumns	The following are currently implemented values for the data-special tag.

Variables

formatters

formatters: { date: Surge.SlickGrid.DateFormatter, time: Surge.SlickGrid.TimeFormatter, timeRange: Surge.SlickGrid.TimeRangeFormatter, hidden: Surge.SlickGrid.HiddenFormatter, '2decimal': Surge.SlickGrid.TwoDecimalNumberFormatter, yesno: Surge.SlickGrid.YesNoCellFormatter, YesNoCellFormatter: Surge.SlickGrid.YesNoCellFormatter }

These are aliases for formatters that can easily be set up and referenced throughout your project in markup rather than having to use the fully qualified object name Currently available date, time, timeRange, hidden, 2decimal

To add your own aliases

$.extend($.surge.slickGrid.formatters, {
  myFormatterAlias: MyApp.SlickGrid.MyFormatter
})
..
<th data-id="someProperty", data-formatter="myFormatterAlias">My Property</th>

specialColumns

The following are currently implemented values for the data-special tag. Note that these will rarely actually implement the desired action, more commonly this will simply set up the corresponding UI. You may add special columns by adding a new key to this object. The object returned by the corresponding function is used to extend the default SlickGrid column options.

delete	Creates a formatted column with a default icon. Bind to the “gridcellclick” event to wire up delete logic.
reorder	Creates a column that allows reordering of rows with the mouse. This will actually impelment drag-drop of rows, only the column UI for it. To implement bind to the the “gridrowmove” event. If you are using v2 you must remember to include rowmovemanager.v2.js.
select	Creates a column containing a checkbox with name select-row and the value = to row index