Using EJS TreeGrid

All these settings can be fully customized by developers, therefore this help should be modified to match the actual state

Mouse functions

• Click to cell focuses and lets edit (editable) cell (by pressing character key).
• Right click to cell shows popup menu for the cell, if defined
• Mouse wheel scrolls active grid vertically. The active grid is the grid clicked last time.
• Dragging by right mouse button scrolls grid section under mouse cursor in the move direction(s)
• Click toin row panel selects or un-selects row
• Click toin header selects or unselects all rows
• Ctrl + Click toin header inverts selection of all rows
• Draggingin row panel inverts selection in continuous range of rows
• Ctrl + Dragging cell selects or unselects range of rows or cells
• 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
• Click todeletes or un-deletes row
• Click toin header deletes or un-deletes selected rows
• Click toadds new row or or duplicates the row or copies selected rows above or below the row
• Click toin header adds new row or duplicates focused row or copies selected rows above or below focused row
• Draggingmoves row to new position, always moves single row, not selected rows
• Draggingby right mouse button copies row to new position, always moves single row, not selected rows
• Ctrl + Draggingby right mouse button copies row and its children to new position, always moves single row, not selected rows
• Dragging cell moves row to new position indicated by icon in the tree: cannot drop to this position, drop above this row, drop below 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 aboveicon, 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 toin filter shows menu to choose filter operator
• Click toin filter / group / search row panel enables / disables actual filter / group / search settings
• Click toin filter cell enables boolean filter by value 1, next click to filters by value 0 and next click to switches the filter back off
• Click to header cell sorts rows by this column ascending, next click sorts descending.
  Sort direction and order is indicated by sorting icon:no sort, first column asccending, first column descending, second column, third column.
• Ctrl + Click to more header cells within 2 seconds adds these columns to sorting in this order.
• Dragging column's edge in header resizes column. Dragging right side pager header edge resizes pager.
• Dragging column's header moves column to new position.
  New potential position is marked byblue arrows inside the same section andred arrows outside.
  While dragging column on edge of scrollable column section, it scrolls left or right.
• Dragging column's header to group row adds this column to grouping and groups by it.
  Dragging column's header within the group row changes the grouping order.
  Dragging column's header outside the grouping row removes the column from grouping.
• Dragging separator between horizontal sections (left/middle and middle/right) resizes / shrinks the column sections
• Click toshows calendar to change date value
• Click toshows list of predefined values for the cell
• Click toexpands row's children
• Click tocollapses row's children
• Click to in header expands column's children
• Click to in header collapses column's children
• Dragging cell with Shift fills values of all selected cells by the first cell in the range

Mouse functions in Gantt chart

• Dragging bar edge resizes the bar. Resizing the bar to zero width deletes the bar.
• Dragging bar or icon moves the item inside the cell
• Only the Run bars or flag icons can be moved to another row or grid, this behavior is not set by default, but can be done by any mouse dragging action.
• Dragging from bar or milestone icon outside the row to another bar or milestone icon creates new dependency between the items.
• Dragging on empty space creates new bar.
• Right button Dragging selects Run boxes inside rectangle.
• Ctrl + Click to bar or icon or dependency end deletes the item
• Double Click to bar or item or dependency end changes the item, e.g. lets enter text of the bar, lets assign resources, lets enter dependency lag etc. Or it can select Run box.
• Double Click to empty space creates new icon at the point
• Ctrl + Right Click to bar changes percentage completion to the selected point
• Shift + Right Click to bar lets enter the percentage completion
• Right Click to cell shows popup menu with all action items related to Gantt item under mouse cursor
• Dragging Gantt header zooms to selected date range
• Click to Gantt header zooms to selected date
• Right Click to Gantt header unzooms back to previous zoom level or zooms out

Touch screen functions (especially for Apple iPad tablets and Android tablets)

• Touch pads support all standard mouse functions except with Right mouse button and with control keys Ctrl and Shift
• All touch pad events can be customized independently on the standard mouse and key events
• Scrollbars behave like standard browser scrollbars.
  Dragging the slider scrolls in opposite direction,
  touching arrows instantly scrolls in the direction slowly,
  touching between slider and arrow instantly scrolls in the direction faster.
  The scrollbar size can be chosen in configuration menu by Scrollbar type menu item.
• Dragging not focused cell by one finger scrolls tablet surface as standard iPad feature. Or scrolls grid horizontally and tablet vertically.
• Tap to cell focuses the cell.
• Dragging focused cell by one finger moves the row to another position or selects or fills the cell values.
• Tap to focused cell starts editing the cell.
• Finish editing - editing finishes by tapping enter on keyboard or tapping outside the cell.
  There is no escape, you can cancel the changes by tapping Undo on keyboard or accept the changes and click to TreeGrid Undo button .
• Tapping focused cell by two fingers shows popup menu for the cell, if defined. Tap by one finger while the second finger is touching pad.
• Dragging cell by two fingers zooms page as standard iPad feature.
• Draggingby one finger moves row to new position like dragging by mouse
• Draggingby two fingers copies row like dragging by mouse right button
• Draggingby three fingers copies row and its children like dragging by mouse right button with ctrl
• Draggingby one finger inverts selection in continuous range of rows like dragging by mouse
• Dragging header by one finger behaves like by mouse, resizes column by dragging edge, moves or groups column by dragging body. Including pager header.
• Dragging separator between horizontal sections by one finger (left/middle and middle/right) resizes / shrinks the column sections

Touch screen functions in Gantt chart (especially for Apple iPad tablets and Android tablets)

• On touch screen there should be editing menu or toolbar to choose which bars and editing actions will be permitted, to simplify editing.
• Tap to bar, icon or dependency focuses the item. It also focused the Gantt cell.
• Tap to empty space or inactive item focuses the Gantt cell.
• Tap to focused bar, icon or depencency shows popup menu to choose the action to do.
• Tap to empty space in focused cell shows popup menu to choose the action to do.
• Dragging focused bar edge resizes the bar.
• Dragging focused bar or icon moves the item. If the item cannot be moved and supports dependencies, it creates new dependency.
• Dragging empty space in focused celll creates new bar.
• Dragging Gantt header by one finger zooms to selected date range
• Tap to Gantt header by one finger shows popup menu to choose the action to do.

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
• Any character key starts edit focused 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
• 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
• Shift + Ins copies focused row above
• Shift + Ctrl + Ins copies focused row with its children above
• 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
• Ctrl + Z undoes last change in data, if undo is permitted
• Ctrl + Y does again the last undone change
• Ctrl + down arrow shows popup dialog with default list or calendar if the cell has defined some

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 cells.
• Reloads data from server and cancels pending changes.
• Renders all pages or switches off rendering all pages
• Prints the grid, opens new browser window with printable version of the grid
• Exports all data to spreadsheet program
• Exports the grid to PDF
• Undoes last change in data
• Does again the last undone change
• 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.
• Joins (spans) all selected cells together.
• Splits spanned cell.
• Outdents focused row by one level (places it below its parent)
• Indents focused row by one level (places into its previous sibling's children, as the last child)
• 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.
• Corrects all dependency errors in Gantt chart.
• Zooms in Gantt chart.
• Zooms out Gantt chart.
• Zooms to fit to window size the Gantt chart.
• Goes to the first page
• Goes to the previous page
• Goes to the next page
• Goes to the last page
• Displays menu to choose which 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
• Displays debug window
• 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.
• Reversed tree (like in MS Excel). If checked, parent row's children are shown above the parent row instead of below.
• 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
• Sort click. How sorting can be set by clicking to column caption.
• 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.
• Check for updates on server. How often the grid checks new data on server when used synchronization with server.
• Scrollbars type. Scrollbars size (none, thin, standard, wide), especially for touch screens (iPad).
• Scroll by. The way of scrolling by dragging content at touch screen (iPad). (none, by one finger, two fingers, three fingers).
• 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 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.

Configuration items for Gantt chart

• Circular dependencies. If creating circular dependencies is permitted, like A -> B -> C -> A.
• Starting tasks on holidays. If permitted to start tasks on excluded dates. Just "visual" setting, all calculations in chart are always done only in non excluded dates.
• Incorrect manual inputs. How the changes done in Gantt source cells are handled, if violate the Gantt constraints and other restrictions.
• Schedule tasks. If the tasks are scheduled automatically or manually after any change in Gantt chart.
• Schedule tasks from. Scheduling direction, from project start or finish.
• Schedule tasks method. How much the tasks are moved to satisfy their dependencies and constraints.
• Auto schedule also the changed task. For "on" it can move also the tasks, its change invoked the correcting dependencies. For "off" this task is never moved.
• Schedule also already started tasks. For "off" it never moves tasks with percentage complete > 0. For "on" it ignores percentage completion when correcting dependencies.
• Show holidays in chart. For "off" all the excluded dates are removed from display.
• Can move objects before project start. If Gantt bars and icons can be moved by a user to start before project start
• Can move objects after project finish. If Gantt bars and icons can be moved by a user to end after project finish
• Project start is preferred to constraints. What is preferred when correcting dependencies and there is no room for the task due constraint and project start violation.
• Project finish is preferred to constraints. What is preferred when correcting dependencies and there is no room for the task due constraint and project finish violation.
• Minimal slack for critical task. If tasks's slack is less than or equal to this value, the task is marked as critical. Slack means, how much can be the task moved right (to be late) to not affect the project finish.
• Minimal slack bound for error task. If tasks's slack is less than this value, the task is marked as error task. It means it should be moved left to correct the project finish violation.
• Calculate critical path individually. For "on" the project finish is calculated for every independent group of tasks. For "off" there will be only one global project finish.

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.

Search row

• Search row is special row, usually displayed on the top, under header and fixed rows.
• You can search rows or cells in grid for simple string like Google or by complex formula.
• The found rows can be filtered, selected, colored or focused.
• Or you can select predefined search formulas from select box.
• There are many settings to more specify the searching options.

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/