Setting Options
var options = {
allowColDelete: false,
rowHeight: 40,
// ...
};
var grid = new DataGridXL("grid", options);
Actions: Cell
allowCellEdit
Defines if user is allowed to edit cell values by keyboard. (This setting does not prevent cut, paste & cell-fill actions from modifying any cell values.)
allowCellFill
Defines if user is allowed to fill cells by dragging fill handle.
cellFillDirection
Defines cell direction(s) in which user can drag to fill cells. (Setting is ignored if allowCellFill is set to false.)
Actions: Clipboard
allowCopy
Defines if user is allowed to copy cell values.
allowCut
Defines if user is allowed to cut cell values.
allowPaste
Defines if user is allowed to paste cell values.
delayedCut
If true, actual clearing of values is performed only when pasting (similar to well-known spreadsheet apps). If false, cut will clear values immediately.
Actions: Column
allowColDelete
Defines if user is allowed to delete columns.
allowColInsert
Defines if user is allowed to insert columns.
allowColMove
Defines if user is allowed to move (reorder) columns.
allowColResize
Defines if user is allowed to resize columns.
undoableColResize
Defines if column resize action is undo-able.
Actions: Row
allowRowDelete
Defines if user is allowed to delete rows.
allowRowInsert
Defines if user is allowed to insert rows.
allowRowMove
Defines if user is allowed to move (reorder) rows.
Activation
deactivateOnClickOutside
Defines if grid should deactivate ('unfocus') if user clicks outside the component. Regardless of setting, clicking any HTML element with class .dgxl-app will not deactivate the grid.
instantActivate
Defines if grid should auto-activate (selecting cell 0,0) when it's created. If false, grid is only activated when user clicks inside component.
Axes: Columns
colHeaderHeight
Height of column headers in pixels. Applies to all.
colHeaderLabelFunction advanced
Provide a custom function that returns a string label for every column header. Overrides labelType, labelPrefix and labelSuffix options. HTML supported.
colHeaderLabelPrefix
A string to prepend to column header label.
colHeaderLabelSuffix
A string to append to column header label.
colHeaderLabelType
Defines label series type for untitled columns. index for 0,1,2; numbers for 1,2,3; letters for A,B,C. id to use column IDs as labels. none for blank headers.
defaultColAlign
Default column alignment. For column header alignment, use defaultColHeaderLabelAlign instead.
defaultColHeaderLabelAlign
Default label alignment of column headers.
defaultColWidth
Default column width in pixels.
showColHeaders
Display column headers true/false.
Axes: Rows
rowHeaderLabelAlign
Label alignment of row headers. Applies to all (cannot be set individually).
rowHeaderLabelFunction advanced
Provide a custom function that returns a string label for every row header. Overrides labelType, labelPrefix and labelSuffix options. (No HTML-support.)
rowHeaderLabelPrefix
A string to prepend to every row header label.
rowHeaderLabelSuffix
A string to append to every row header label.
rowHeaderLabelType
Defines label series type for (untitled) rows. index for 0,1,2; numbers for 1,2,3; letters for A,B,C. id to use row IDs as labels. none for blank headers.
rowHeaderWidth
Width of column that displays row headers (pixels).
rowHeight
Row height in pixels. The height applies to every single row in the grid (rows cannot be resized individually).
showRowHeaders
Display row headers true/false.
Context Menu
contextMenuItems
Takes an array of context menu items. Supports context menu item presets (strings) & custom defined context menu items (objects). For no context menu, pass an empty array or false.
Context Menu (touch)
contextMenuTouchItems
Takes an array of context menu touch items. Supports context menu touch item presets (strings) & custom defined context menu touch items (objects). For no context menu touch, pass an empty array or false.
Data
columns advanced
Define initial column-objects. Properties may include title, field, align, width and source.
data
Data to be displayed in data grid. Can be either a 2D Array or an Array of Objects (JSON-style). When no data is given, grid will default to an empty 3×3 grid.
