Using EJS TreeGrid
Mouse functions
- Click to cell focuses and edits (editable) cell
- Click to
selects or unselects row
- Click to
deletes or undeletes row
- Click to
in header selects or unselects all rows
- Click to
in header (un) deletes selected rows
- Click to
in header sorts rows by this column descent, next click sorts ascent
- Dragging column's right edge in header resizes column
- Dragging column's header moves column to new position, you can move column inside its
section only. New potential position is marked by blue line inside columns.
- Dragging cell moves row to new position indicated by icon in the tree:
cannot drop to
this position,
drop in front of this row,
drop behind
this row,
drop
into row's children, to the end. If you drag selected row, all selected
rows are dragged, but only if they has the same parent row. You can drag
rows even among more grids, if these are present. In master-detail you can
drag rows from detail to master to move rows from one detail row to
another.
- Click to
shows calendar to change date value.
- Click to
expands
row's children
- Click to
collapses
rows' children
Control keys
- Arrow keys change focused cell
- Tab moves focus to the next cell
- Shift + Tab moves focus to the prior cell
- Tab in edit mode edits next editable cell
- Shift + Tab in edit mode edits prior editable cell
- Enter or F2 starts edit focused cell
- Enter in edit mode confirms edit changes
- Esc in edit mode cancels edit changes
- Space selects or unselects row
- Ctrl + Space selects or unselects all rows
- Del deletes or undeletes row
- Ctrl + Del deletes or undeletes selected rows
- Ins inserts new row to the bottom
- Ctrl + Enter expands / collapses row's children
- Home focuses first variable row
- End focuses last variable row
- Page Up moves focus up by one page
- Page Down moves focus down by one page
Control panel
Submits data
to server and saves configuration to cookies on client. In examples or on local computer it
saves just configuration.
Reloads
data from server. In examples or on local computer it just re-renders the
TreeGrid.
Adds new row
to the bottom
Re-sorts
all rows. Use it if Auto sort is disabled and some values are changed.
Especially if there is sorting by more columns.
Auto
sort enabled, after edit, row can be moved to new position due its sort
order,
Auto sort disabled
Shows
deleted rows in red color,
deleted
rows are hidden and cannot be undeleted
Other
- If you move focus to another cell in edit mode, the changed value is
accepted as if you pressed Enter.
- After confirm new value after edit, calculated cells are recalculated.
If Auto sort is set and sorting is enabled by this column, row is moved to
another position by sort order.
Colors
- -
Deleted row
- -
Added row
- -
Changed row - any cell value has been changed or row has changed its
position
- -
Selected row
- -
Not detailed row in master table (master/detail relationship)
- -
Focused row
- -
Focused cell
- - Focused
cell in edit mode
- -
Row cannot be focused
- -
Row under mouse cursor
- -
Cell under mouse cursor
More info