Using EJS TreeGrid

Mouse functions

• Click to cell focuses and edits (editable) cell
• Click to
  selects or un-selects row. You can select or unselect more rows by clicking first icon and dragging over next rows.
• Click to
  deletes or un-deletes 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. You can click anywhere in header cell to perform sorting. Sort direction and order is indicated by sorting icon:
  first column descending,
  first column ascending,
  ,
  second column,
  ,
  third column,
• Dragging column's 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 any 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 together to new place, but only if they are all of the same type.
  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.
  When dragging, there are other functions available:
  
  •  When mouse moves above
    icon, the row expands its children.
  •  When mouse moves above header or head rows, the grid scrolls up, above toolbar or foot rows, the grid scrolls down. To scroll you can use mouse wheel too.
  •  When mouse moves above pager, the grid switches to page under mouse cursor.
• Click to
  shows calendar to change date value.
• Click to
  expands row's children
• Click to
  collapses rows' children
• Ctrl + Click selects or unselects clicked row.
• Shift + Click selects range of rows between focused and clicked, include these two. If any row in the range is selected, unselects the range.

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
• Alt + Enter in edit mode in multi line textarea confirms edit changes
• Ctrl + Enter in edit mode in multi line textarea confirms edit changes
• Esc in edit mode cancels edit changes
• Gray plus in edit mode confirms edit changes
• Gray minus in edit mode cancels edit changes
• Space selects or unselects row
• Ctrl + Space selects or unselects all rows
• Del deletes or un-deletes row
• Ctrl + Del deletes or un-deletes selected rows
• Ins inserts new row to cursor position
• Ctrl + Ins inserts new row into children of focused row
• 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
• Ctrl + Enter not in edit mode expands or collapses row's children
• Gray plus not in edit mode expands row's children
• Gray minus not in edit mode collapses row's children

Copy & paste

• Ctrl + C copies values from all selected rows to clipboard. If no row is selected, copies focused row. Only if grid is not in edit mode. Data are in plain text, cells are separated by tabulator, rows are separated by enter (CRLF). This data can be pasted back to the grid or to any text editor or spreadsheet program like MS Excel. Not in Opera browser.
• Ctrl + V pastes values from clipboard to selected rows. If no row is selected, copies first row to focused row. Only if grid is not in edit mode. Cells in data are tab separated, rows are CRLF or CR or LF separated. Changes only cells that can be edited. If pasted data has less columns than grid, pastes them from actual focused column, otherwise from first column. Not in Opera browser.

Toolbar

• Submits changed data to server and accepts all pending changes, if server validated them, otherwise marks invalid values.
• Reloads data from server and cancels pending changes.
• Refreshes pages if grid slows down (if too many pages were already rendered)
• Prints the grid, opens new browser window with printable version of the grid
• Exports all data to spreadsheet program
• Adds new row to the cursor position if parent row accepts children.
  Or if there are selected rows, the menu is displayed and you can choose to move or copy selected rows or to ignore selection and add new row.
• Adds new row to focused row's children, to the end, if this row accepts children.
  Or if there are selected rows, the menu is displayed and you can choose to move or copy selected rows or to ignore selection and add new row.
• Enables or disables sorting. When enabling sorting, re-sorts grid according to actual sorting.
  You can disable sorting, if you need to choose new sorting according to more columns to avoid multiple re-sorting, especially in paged grids.
• Enables or disables calculations. When enabling calculations, re-calculates all cells.
  You can disable calculations when editing large grids.
• Expands all rows. For large grids expands only some rows to avoid locking browser. Starts expanding from focused row.
• Collapses all rows.
• Displays menu to choose what columns will be displayed.
• Displays TreeGrid configuration window. These settings are saved to client cookies and therefore are persistent. See Configuration description below.
• Displays this help
• You can resize grid by mouse dragging this icon on the right bottom corner. By double click you can restore to original size.

Configuration

• Show deleted rows (in red). If checked, deleted rows are still visible and colored and can be undeleted. If you check Auto updates, this option have no sense.
• Auto sort rows after change. If checked, after user modify value in column according to is grid sorted, row is sorted and moved to the new position
• Auto update changes to server. If checked, all modifications (value changing, rows moving, adding, deleting) are immediately uploaded to server. Does not wait for server response, grid is still accessible. After server response clears changed flags. If it is not checked, updates can be send by submit button
  .
• Mouse hover. What blinks under mouse cursor. Hovering all cells can slow down browser responses.
• Show dragged object. If checked, dragging rows or moving columns are attached to the mouse cursor.
• Show row's left panel. If it is not checked, the left panel
  is hidden and its functions can be performed by keys only.
• Show sorting icons. If sorting icons in header are visible.
• Show pager. If checked, the pager with page names is visible on the right of the grid.
• Show all pages. If checked, all pages are visible at once and can be accessed by sliding scrollbar or moving cursor. The page is rendered only when is scrolled to the window.
  If it is not checked, only one page is visible at a time and other pages can be accessed by clicking on pager or by PgUp and PgUp keys.

Filter row

• Filter row is special row, usually displayed on the top, under header. There can be set filter conditions for every column. If other rows has in this column value which satisfies the filter condition, the row is displayed, otherwise is hidden.
• Filtered can be only variable rows. Some rows can be marked as always visible. These are often rows with children rows in tree to filter only some levels.
• A cell in filter row contains filter operator and its parameter value. Some operators are used for some column types only. Filtering is fired after operator or value changes.
• You can select filter operator from menu. By default filter is disabled:
  .

Group row

• Group row is special row, usually displayed on the top, under header and fixed rows. You can group rows to tree according same values in appropriate column(s).
• Grouped can be only variable rows. Some rows can be marked that cannot be grouped. In tree there will be only one level of rows to be grouped.
• You can select predefined grouping from select box.
• Or you can drag column caption to the group row to be grouped by this column. If some column(s) are placed there already, you can put the new column to appropriate place. To remove column from grouping, just drag its caption from group row outside.

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. If Auto update is set, value is submitted to server.

Colors

•   - Deleted row
•   - Added row
•   - Moved row - row has been moved to another parent
•   - Changed row - any cell value has been changed
•   - Changed cell
•   - Selected row
•   - Focused row
•   - Focused cell
•   - Focused cell in edit mode
•   - Focused cell in read only edit mode
•   - Cell cannot be focused
•   - Read only cell
•   - Master row in master / detail relationship
•   - Master row displayed in detail table
•   - Child page
•   - Row under mouse cursor
•   - Cell under mouse cursor

More info

• http://www.treegrid.com/