data_grid

A grid. Type is data_grid.

Lowercase keys in Option.Grid are dxDataGrid options. Common ones are columns, keyExpr, editing, and toolbar. The tables below are only the keys this platform adds.

Minimal example

{
  Type: "data_grid",
  Id: "orders",
  Option: {
    Component: {
      AutoLoad: true,
      LoadSql: { sql_id: 100 },
      UpdateRowSql: { sql_id: 101 },
      IdField: "id"
    },
    Toolbar: {
      Items: { Reload: true, Save: true, AddRow: true }
    },
    Grid: {
      keyExpr: "id",
      columns: [
        { dataField: "code", caption: "Order no." },
        { dataField: "amount", caption: "Amount", ValidRequired: true },
        { dataField: "owner_id", visible: false, KeepData: true }
      ]
    }
  }
}

Component

Key	Meaning
AutoLoad	Run LoadSql as soon as the page opens
ReadOnly	The whole grid is read-only
Width / Height	Component size
LoadSql	Query. sql_id inside the object points at sys.page_sql
InsertRowSql	Insert one row
UpdateRowSql	Update one row
DeleteRowSql	Delete one row
InsertRowWithIdSql	Insert an empty row and return its id
AfterSaveSql	SQL to run after a save
AfterInsertRow	"js:" to run after an insert
AfterUpdateRow	"js:" to run after an update
AfterDeleteRow	"js:" to run after a delete
NewSql	SQL for the toolbar New action
NewRowsSql	SQL that creates several rows at once
CloneSql	Clone the current document
CloneRowsSql	Clone rows
DeleteSql	Toolbar action that deletes the document. Deleting one grid row uses DeleteRowSql
IdField	Primary-key field name
SeqField	Order field, read and written by move up and move down
UniqueField	Field used to decide that a row is a duplicate
RowDefaults	Default values for a new row
DataPool	Named data sets. A column refers to one with FromPool
Init	Initial values. Init.MainSelect is the initial value of the main select, and it may be "js:"
RowUnselectableExpr	Which rows cannot be selected, as "js:"
RememberSelection	Remember the current selection
AppendBlankColumn	Add a blank column at the end so the last real column is not stretched
DynamicColumns	Dynamic columns. Holds Column (the column definition) and LoadSql
Import	Import. Holds Sql, Batch, and ChunkSize
Auth	Switches for how permissions behave on this page

ActionAuthTriState, ColumnAuthTriState, FormFieldAuthTriState, SyncActionsOnSelect, SyncColumnsOnSelect, and SyncFormFieldsOnSelect belong to the permission-setup pages. A business page does not write them.

Inside LoadSql and the other SQL objects, sql_id sits beside the other parameters:

LoadSql: { sql_id: 100, status: "open" }

Toolbar

Keys of Items are button names. The value is true, false, or a toolbar-item config. MoreItems is an array of custom buttons.

Button	What it does
MainSelect	Main select. The chosen value is a parameter of later SQL
New	New document
Clone	Clone
Delete	Delete the document
Send	Send the document
Save	Save
Reload	Reload
Filter / Filter2	Two filter boxes
Date	A single date
StartDate / EndDate	A date range
StartTime / EndTime	A time range
AddRow	Add one row
AddRowsBatch	Add rows in a batch
AddFolder	Add a group row
CloneFrom	Clone in from a picker
CloneRows	Clone the selected rows
ReplaceRow	Replace the selected row
DeleteRow	Delete the selected row
MoveUp / MoveDown	Move up, move down
ExpandAll / CollapseAll	Expand all, collapse all
Import / Export	Import, export
WrapText	Wrap cell text
ToggleHeaderRow	Show or hide the header row
ToggleFilterRow	Show or hide the filter row
ResetLayout	Restore column widths and order

A toolbar item can also carry:

Key	Meaning
LoadWhenEmpty	Allow loading while the select is still empty
DeleteNow	Delete immediately, without waiting for Save
OperationIndex	Which entry in Operations runs when this button is clicked
CallMethod	Method name to call on the component

DevExtreme’s own toolbar items stay lowercase, for example searchPanel and columnChooserButton.

Platform keys on Grid

These keys sit on Option.Grid, next to columns:

Key	Meaning
VerticalAlign	Vertical alignment of cells
MergeBaseField	Which field decides that cells belong to the same merge group
StateList	List used for column state

Platform keys on a column

These keys sit on one entry of Grid.columns[], next to dataField and caption. dataField, caption, visible, dataType, and lookup are DevExtreme keys.

Key	Meaning
KeepData	Keep the field in the result when the column is hidden. See Page JSON
Default	Default value for this column on a new row
Wrap	Wrap this column
Help	Help text on the column header
MergeCells	Merge this column using MergeBaseField
ValidRequired	Required before save
ValidExpr	Validation expression before save
ValidSkipOnSave	Skip this column’s validation on save
BoolAsNum	The checkbox is boolean on screen and stored as 0 and 1

A column lookup can fill its dropdown with LoadSql. Put dataSource: [] beside it, then use InitSql.

Blocks that go with buttons

These blocks sit next to Component. They describe what opens, and which SQL runs, after a button click.

Block	Keys inside
Operations	Name, Version, Popup, Sql, RunJs, GotoPage, ReloadAfter, Grid
Operations[].Popup	Form, DisableOk, DisableCancel, When
Operations[].GotoPage	PageId, Title, Params, When
Pickers	A picker. Name, LoadSql, Grid, Popup, Fetch
Pickers[].Fetch	Sql, FromField, ToParam, UniqueField
AddRowByForm	Enabled, OperationIndex, SaveNow, RowIterator
AddRowByPicker / AddRowsBatchByPicker / ReplaceRowByPicker / CloneByPicker	Enabled, PickerIndex, WrapAsFolders, FolderNameField

When, RunJs, and RowIterator may be "js:".