News in version
TreeGrid Gantt chart SpreadSheet Examples Documentation Download Development Licensing Prices References Contacts Buy Try it free
Live examples
Grids and tree grids

Complex grid - the first one Complex grid - RTL mode Large table with paging Large table without paging Multiline & images - books Positions and spanning Photo album - images PivotTable - 2D grouping Schools - list and ratings File and directory browser Extended JavaScript API Sharing & synchronization 1 000 000 rows, 1 000 cols


Microsoft Excel sheet TreeGrid sheet TreeGrid sheet - RTL mode

Gantt and bar charts

Gantt & Network chart Gantt & Network chart - RTL Simple Gantt chart Big Gantt chart - 1000 rows Gantt chart tree by grouping Resources usage chart Run chart - bar chart Grouping bars - run groups Joined boxes and containers Line chart and XY charts

Live grid tutorials
Basic (rows and columns)

1. Basic grid 2. Rows 3. Columns 4. Default rows, columns 5. Rows manipulation 6. Rows identification

Cells (types, formats, edit)

1. Edits - inputs & multiline 2. Combos & checkboxes 3. Html, links, imgs, buttons 4. Space buttons & tabs 5. Permissions & validation 6. Cell CSS style & color 7. Conditional formatting 8. Custom controls & editing 9. Events & custom dialogs 10. Column & row spanning 11. Dynamic cell spanning

Tree (rows, columns, groups)

1. Row tree 2. Column tree 3. Grouping rows to tree

Sorting rows

1. Sorting rows

Filter and search

1. Filtering rows 2. Filtering in tree 3. Search & advanced filters


1. Dragging rows 2. Dragging between grids 3. Dragging external tag

Paging (rows, tree, columns)

1. Client root paging 2. Client child paging 3. Client column paging 4. All client paging 5. Adding pages dynamically 6. Server root paging 7. Server child paging 8. All server paging

Master and detail

1. Nested detail simple 2. Nested detail tables 3. Master detail simple 4. Master detail tables 5. Master detail more tables 6. Master detail in tree 7. Master detail trees 8. Nested detail nested deep 9. Nested detail server paging

Calculations (cell formulas)

1. Calculated columns 2. Calculated rows 3. Calculation order 4. Calculated rows in tree 5. Calculation order in tree 6. Calculated attributes 7. Editable calculated cells

Live Sheet tutorials
Sheet features

1. Row and column Index 2. Auto size (auto adding pages) 3. Row&column manipulation 4. Cell manipulation 5. Cell style 6. Editable formulas (ids) 7. Editable formulas (indexes) 8. Cell format 9. Outside edit 10. Auto tree

Live Gantt tutorials
Main bar (Gantt chart)

1. Main bar 2. Discrete main bar 3. Main bar plans 4. Summary tasks

Run bar (Bar chart)

1. Run array definition 2. Run JSON definition 3. Run summary definition 4. Run drag 5. Run groups & API 6. Run bar as task 7. Run box as task 8. Network diagram 9. Run join and drag 10. Run external drag 11. 2 fixed levels containers

Flags and points

1. Flags 2. Points

Display, zoom, paging

1. Header & background 2. Zoom 3. Paging 4. Synchronizing more Gantts

Dependencies & scheduling

1. Constraints 2. Dependencies 3. Schedule tasks 4. Critical path


1. Calendars exclude


1. Resources 2. Availability

5. Rows manipulation

Adding, deleting, copying, moving, selecting rows

Changes to be sent to server

  • Selecting rows and cells

    • See documentation for Row and cell select.
    • Selected rows are shown by default in yellow background.
      The selected rows can be deleted, moved or copied together. Or they can be used for any custom action, get them by API method GetSelRows.
    • One row can be selected or unselected by panel Select button or by ctrl+click or by pressing space key on focused row.
      All rows can be selected or unselected by header panel Select button. If there are both selected and not selected rows, the rows are unselected.
      Range of rows can be selected by click to the first row and shift+click to the last row. And by ctrl+drag rows.
      All rows selection can be inverted by ctrl+click to the header panel Select button. Range of rows can be inverted by dragging panel Select buttons.
      Rows can be selected and unselected also by Search feature, see tutorial Search and advanced filters.
      Rows can be selected and unselected also by API, methods SelectRow and SelectAllRows.
    • Default actions set for selecting in Defaults.xml in <Actions> tag:
      OnCtrlClickCell="SelectCell OR DeselectCell OR SelectRow OR DeselectRow,1" OnShiftClickCell="InvertCellRangeFirst OR InvertRowRangeFirst,1"
      OnCtrlDragRow="InvertCellsFirst OR InvertRowsFirst" OnClickPanelSelect="SelectRow OR DeselectRow" OnDragPanelSelect="InvertOddRows" OnClickHeaderSelect="DeselectAll OR SelectAll" OnCtrlClickHeaderSelect="InvertAll"
    • Selecting in grid can be restricted by setting <Cfg> attribute Selecting='0'.
      Individual row can be set as unselectable by row attribute CanSelect='0'.
    • The selected row is marked by row attribute Selected='1'. It can be set in input data and can be read by API.
      Selected rows can be also uploaded to server when Upload_Type contains flag "Selected".
      The selected rows can be also saved to cookies by <Cfg> attribute SaveSelected.
    • It is possible also select individual cells or cell ranges by setting <Cfg> attribute SelectingCells='1'.
      The selected cells are not used by TreeGrid and can be used for custom actions, get them by API method GetSelRanges.
    • To permit selection only one row at time set <Cfg> attribute SelectingSingle='1'
      To have not persistent selection, to clear it after some action or when selecting new selection attach action ClearSelection to given events. For example <Actions OnClickCell='ClearSelection,FocusEdit' OnClickOutside='ClearSelection,Blur'/> to clear the selection after any click.
  • Deleting rows

    • See documentation for Row deleting.
    • Deleted rows are shown by default in red background. Or they are hidden if set <Cfg> attribute ShowDeleted='0'.
      The deleted rows are removed from grid after successful save changes on server or accepting changes by API method AcceptChanges.
    • One row can be deleted by clicking to row panel Delete button or by pressing del key on focused row.
      More selected rows can be deleted by clicking header panel Delete icon or by pressing ctrl + del key.
      One row can be deleted also by API method DeleteRow or DeleteRowT. Selected rows by API method ActionDeleteSelected.
      Row can be also physically removed from grid by API method RemoveRow - the change cannot be send to server.
    • Default actions set for deleting in Defaults.xml in <Actions> tag:
      OnClickPanelDelete="DeleteRow OR UndeleteRow" OnDel="DeleteRowF OR UndeleteRowF,1"/>
      OnClickHeaderDelete="UndeleteSelected OR DeleteSelected" OnCtrlDel="UndeleteSelected OR DeleteSelected,1"/>
    • Deleting row with children deletes also all the children. The children are deleted even if they are marked as undeletable.
    • Deleted row is marked by row attribute Deleted='1'. Deleted child due deleting its parent is marked by Deleted=2, but only for API; in uploaded data it is set also as '1'.
      The Deleted attribute is set in uploading changes to server XML, it can be read by API and can be also set in server response XML to delete the row from server.
    • Deleted rows can be undeleted by clicking to panel Delete button or by pressing del key on focused row.
      Selected rows can be undeleted by clicking to header panel Delete button or by pressing ctr+del key. If there are selected both deleted and undeleted rows, the rows are undeleted.
      Row can be undeleted also by API method DeleteRow with parameter for undelete.
    • Deleting rows can be suppressed by <Cfg> attribute Deleting='0'.
      One row can be set as undeletable by row attribute CanDelete='0'.
      The permissions can be set also dynamically by API event OnCanRowDelete. It is not called for row children.
    • For every deleted / undeleted row, including children, is called API event OnRowDelete / OnRowUndelete.
    • The deleted rows cannot be moved or copied. Only deleted children can be moved with parent, but not copied.
      Deleted rows can be copied if set <Cfg> attribute CopyDeleted='1'.
  • Adding new rows

    • See documentation for Adding new empty rows.
    • Added rows are shown by default in green background.
    • New row can be added before focused row, after focused row or to the end of grid by clicking to toolbar Add button.
      New row can be added into focused row children to beginning or to the end by clicking to toolbar AddChild button.
      New row can be added before actual row, after actual row, to actual row's children to beginning or end by clicking to row panel Copy button. This button can be shown by <Panel Copy='1'/>.
      New row can be added before focused row by ins key and to the children of focused row by ctrl+ins.
      New row can be added by API method AddRow.
    • Default actions set for adding and copying in Defaults.xml in <Actions> tag:
      OnClickButtonAdd="CopyMenuF OR AddRowF OR AddRowEnd" OnClickButtonAddChild="CopyMenuF OR AddChildEndF"
      OnClickPanelCopy="CopyMenu" OnClickHeaderCopy="CopyMenuF OR AddRowF OR AddRowEnd"
      OnIns="AddRowF" OnCtrlIns="AddChildEndF" OnShiftIns="CopyRowF" OnShiftCtrlIns="CopyTreeF"
    • New row is marked by attribute Added='1'.
      The Added flag and green color is removed from added row after successful save changes on server or accepting changes by API method AcceptChanges.
      The row position is uploaded to server in attributes Parent, Next and Prev as ids of these rows.
    • Adding new rows can be restricted by <Cfg> attribute Adding='0'.
      Restrict adding root rows can be set by x<Root CDef=""/>, adding new children to row by its attribute CDef="".
      Adding permissions can be controlled also dynamically by API event OnCanRowAdd.
    • New row will be empty or read its attributes and cell values from its default row set by Def attribute.
      The value of Def attribute for the new row is read from parent row's CDef attribute.
    • For every new row added or copied are called API events OnRowAdd and OnRowAdded.
  • Moving and copying rows

    It is demonstrated in tutorials 1. Dragging and copying rows and 2. Dragging rows between grids
    • Moving row(s) by dragging. Inside one grid or between grids. See documentation Row moving and dragging.
    • Moving row(s) by changing row level - actions Indent and Outdent. Only inside one grid. See documentation Actions Indent and Outdent.
    • Copying row(s) by dragging. Inside one grid or between grids. See documentation Row moving and dragging.
    • Copying row(s) by Panel or Toolbar Add button. Only inside one grid. See documentation Copying existing rows.
    • Copying and pasting row(s) via clipboard. Inside one grid or between grids or into and from external source like MS Excel. See documentation Copy & paste via clipboard.
  • Fixed rows

    • Fixed rows can be selected or deleted, but cannot be added, copied or moved.
      Can be copied to clipboard and cells changed by pasting, but not added by pasting.
      They are not affected by SelectAll or DeletedSelected actions.