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 to / in row panel selects or un-selects row
• Click to / in header selects or unselects all rows
• Ctrl + Click to / in header inverts selection of all rows
• Dragging / in 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 toin row panel deletes or un-deletes row
• Click toin header panel deletes or un-deletes selected rows
• Click toin row panel adds new row or or duplicates the row or copies selected rows above or below the row
• Click toin header panel 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.
  In plain grid without tree the potential drop position is marked byblue arrows.
  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.
• Dragging cell with ctrl copies row or selected rows to new position
• Click toin filter shows menu to choose filter operator
• Click to / in filter / group / search row panel enables / disables actual filter / group / search settings
• Click toin filter cell enables boolean filter by value 1, next click tofilters by value 0 and next click toswitches 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 ascending, 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 to / / in cell changes value of boolean cell or cell with side checkbox.
• Click toin cell side shows calendar to change date value
• Click toin cell side shows list of predefined values for the cell
• Click toin cell side shows dialog to pick up files
• Click toin cell side clears the cell, usually the attached files
• Click toin tree column expands row's children
• Click toin tree column collapses row's children
• Click toin 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 specific for Sheet

• Click to cell focuses single cell and lets edit (editable) cell (by pressing character key).
• Shift + Click enlarges focused cells rectangle to the clicked cell.
• Dragging cell resizes focused cells rectangle.
• Dragging bottom right corner of focused cell or cells rectangle fills the cells by values calculated from original focused area.
• Dragging edge of focused cell or cells rectangle moves the cell values to another location.
• Dragging edge of focused cell or cells rectangle with ctrl copies the cell values to another location.
• Dragging index cell top / bottom edge resizes the row.
• Dragging column's header moves column or selected columns to new position.
  
• Dragging column's header with ctrl copies column or selected columns to new position.
  
• Dragging sheet name tab moves sheet to new position.
  
• Dragging sheet name tab with right button copies sheet to new position.
  
• Dragging cells during editing selects cells range and adds it to formula.
  
• Dragging cells during editing with ctrl selects cells range and replaces all the ranges in formula.
  
• Click cell during editing with ctrl selects cell and adds it to formula.
  
• Click cell during editing with shift selects cell and replaces all the ranges in formula.
  
• Click to / in column panel selects or un-selects column
• Click to / in index column panel selects or unselects all columns
• Ctrl + Click to / in index inverts selection of all columns
• Dragging / in column panel inverts selection in continuous range of columns
• Click toin column panel deletes or un-deletes column
• Click toin index column panel deletes or un-deletes selected columns
• Click toin column panel adds new column or or duplicates the column or copies selected columns left or right the column
• Click toin index column panel adds new column or duplicates focused column(s) or copies selected column(s) left or right focused column

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.
• Dragging with shift 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 menuby Scrollbar type menu item.
• Dragging not focused cell by one finger scrolls grid horizontally or vertically or scrolls tablet surface as standard tablet feature.
• Tap to cell focuses the cell.
• Long tap to cell shows popup menu for the cell, if defined. Long tap lasts 500ms (can be customized).
• Dragging focused cell by one finger moves the row to another position or focuses cell range in Sheet.
• 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
• Dragging / by 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)

• Dragging not focused cell by one finger scrolls grid horizontally or vertically or scrolls tablet surface as standard tablet feature.
• 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.
• Long tap to not focused object or 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 not focused bar or icon in focused cell creates new dependency from the item.
• Dragging empty space in focused cell creates new bar.
• Dragging Gantt header by one finger zooms to selected date range
• Dragging Gantt header by two fingers (pinch zoom) zooms to chosen scale
• Tap to Gantt header by one finger shows popup menu to choose the action to do.

Control keys

• Arrow keys change focused cell
• Shift + arrow keys resizes focused cells range in Sheet
• Left / right arrow in edit mode move standard edit cursor left / right.
• Up / down arrow in edit mode move focus to above or below cell. In Lines type ir moves standard edit cursor up / down.
• 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
• Tab in Sheet, if focused cells range, moves only main focus cell, not the whole cell range.
• 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 checks or unchecks Bool type cell
• 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 defaults or other list or calendar if the cell has defined some
• Ctrl + left / right arrow moves selected Radio left or right
• F4 in edit mode in Sheet switches between absolute and relative cell references when editing formula

Copy & paste

Copying and pasting is done by hot keys. The copying to clipboard can be done also from popup menu. Pasting can be done only by Ctrl+V hotkey.

• Ctrl + C (or Meta + C on Mac) copies to clipboard values from all selected rows or focused row or all selected cells or focused cells range - depends on grid settings.
  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.
• Ctrl + X (or Meta + X on Mac) excludes to clipboard values like by Ctrl+C, but deletes the rows or clears the copied cells.
  
• Ctrl + V (or Meta + V on Mac) pastes values from clipboard to selected rows or to focused row or adds the rows below focused row or to focused cell range - depends on grid settings.
  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.

Toolbar

The button is shown only if the grid permits the action. The buttons can be shown also in another row or in more rows.

• Opens chosen xlsx file from local or remote disk in grid.
• 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 (prints) the grid to PDF
• Exports all data to spreadsheet program, to xlsx / xls or csv file
• 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.
• Adds new column to the cursor position. Or if there are selected columns, the menu is displayed and you can choose to move or copy selected columns or to ignore selection and add new column.
• 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)
• Expands all rows. For large grids expands only some rows to avoid locking browser. Starts expanding from focused row.
• Collapses all rows.
• Aligns text content left.
• Centers text content horizontally.
• Aligns text content right.
• Aligns text content top.
• Centers text content vertically.
• Aligns text content bottom.
• Sets or resets text bold.
• Sets or resets text italic.
• Sets or resets text underline.
• Sets or resets text strike.
• Rotates text left.
• Rotates text right.
• Wraps or unwraps text.
• Chooses text color.
• Chooses text shadow color.
• Chooses cell background color.
• Chooses cell border color, thickness and style.
• 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
• 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.
• 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

The item is shown only if the grid permits the action.

• 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.
• Show buttons. If shows toolbar buttons with their texts, possible options: Icons only, Texts only, Icons and texts.

Configuration items for Gantt chart

The item is shown only if the grid permits the action.

• 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.
• Schedule tasks outside project bounds. For "on" permits moving tasks outside project start and project finish during scheduling tasks to correct their dependencies.
• 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.

Configuration items for printing and PDF export

The item is shown only if the grid permits the action.

• File name. Name of file for printing to PDF
• Maximum rows per page. Specifies how many rows can be printed to one page, after that count it prints page break.
• Start page always by root row. For "on" it does not breaks page between child rows, except the child page is higher than page.
• Print all rows expanded. For "on" it expands all rows to print all child rows.
• Print all rows (unfiltered). For "on" it cancels all filters and prints all rows like there was no filter.
• Print selected rows only. For "on" it print only selected rows in plain table, it ignores their position in tree.
• Page size Page size to split printed grid to. If printing to printer, it must be the same as printer page size.
• Page orientation Page orientation to correctly split printed grid to. If printing to printer, it must be the same as printer page orientation.
• Page margin width (mm) Left plus right margin reserved in printed page. If printing to printer, it must be the same as page margin on both sides together.
• Page margin height (mm) Top plus bottom margin reserved in printed page. If printing to printer, it must be the same as page margin on both sides together.
• Fit to one page How to scale the printed grid to fit into page. It does not work in Safari when printing to printer.
• DPI (PPI) ratio Dots per pixel, it scales the page size.
• Page width (px) Final page width in pixels, to this value will be the printed grid split horizontally.
• Page height (px) Final page height in pixels, to this value will be the printed grid split vertically.

Configuration items for export to xlsx / xls / csv

The item is shown only if the grid permits the action.

• File name. Name of file with export for download
• File format. Export format, can be native binary xlsx, textual xhtml (fake xls) or textual csv
• Export all rows expanded. For "on" it expands all rows to export all child rows.
• Export all rows (unfiltered). For "on" it cancels all filters and exports all rows like there was no filter.
• Export tree in Excel outline. Only for xlsx / xls. For csv it adds new column with the outline as characters '#'.
• Indent tree in main column. Adds spaces in beginning of cells in main column, the count of spaces is related to the row level in tree.
• Export selected rows only. For "on" it exports only selected rows in plain table, it ignores their position in tree.
• Freeze (anchor) head rows. Anchors frozen head rows in grid also in the xlsx file.
• Freeze (anchor) left columns. Anchors frozen left columns in grid also in the xlsx file.
• Export also empty cells. For "on" it exports empty cells as actual cells with empty string - overflowing text of preceding cells will be hidden, but the resulting xlsx file of large grids may be larger.

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

Background colors in grid are composed from all the state and style colors of the cell, so the resulted background color can differ from the listed colors.

• text - Standard cell
• text - Not editable cell
• text - Cell that cannot be focused
• text - Preview cell - cell can be edited, but not changed - for selecting text in cell
• text - Cell with editable formula in Sheet
• text - Alternate color for even rows
• text - Selected row, column or cell
• text - Cell with error
• text - Deleted row
• text - Added row
• text - Moved row to another parent in tree
• text - Row with changed cell(s)
• text - Changed cell
• text - Master row - row containing detailed information that can be displayed in detail grid
• text - Master row that displays its detailed information in detail grid
• text - Source row being actually dragged
• text - Source cell that displays its popup menu
• text - Cell under mouse cursor
• text - Not editable cell under mouse cursor
• text - Cell that cannot be focused under mouse cursor
• text - Row under mouse cursor
• text - Focused cell(s)
• text - Focused cell being edited
• text - Focused cell in preview mode - edit but cannot be changed
• text - Main focused cell (the one that will be edited) if focused rectangle of cells
• text - Focused row
• text - Found cell 1 - for Search Mark
• text - Found cell 2 - for Search Mark
• text - Found cell 3 - for Search Mark

More info

• http://www.treegrid.com/