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. Permissions and input validation

Editing and other permissions and validation during editing, before save and before upload

  • Permissions

    All capabilities are permitted by default if they don't collide with other settings.
    Permission settings are processed in this order: grid, cell, cell of default row, row, default row, column, default column. If any of the attribute has not empty value, processing ends and the value is used. The CanEdit permission does not affect cell side Button and Icon, to hide cell side Button or Icon, you must clear it explicitly by ...Button="" or ...Icon="".
    The Editing permission does not affect Space and Filter rows, editing permissions in Space and Filter row must be controlled individually by CanEdit attribute.

    The individual actions for many capabilities are defined in <Actions> tag, predefined in Defaults.xml. And the behavior can be changed by assigning different action to the event.
    For example there is set <Action OnDel="DeleteRowF OR UndeleteRowF,1"/> to delete row by pressing Del key. You can set <Actions OnDel=""/> to disable this behavior or assign to OnDel different action(s).
  • Calculated permissions

    All row and cell permissions can be calculated according to some condition, for example cell (checkbox) value.
    Just set such formula (e.g. CanEditFormula), set the row as Calculated and add the attribute name to CalcOrder.
    For example <I CanDeleteFormula='Col3' Col1CanEditFormula='Col2>10' Calculated='1' CalcOrder='Col1CanEdit,CanDelete' />.
  • Changing




    All the permissions, like many other attributes, can be changed by API.
    Change the <Cfg/> attributes by direct assignment to TGrid object, like Grid.Editing=0. Remember, to bool or integer attributes always set numbers like Grid.Deleting=0 and never strings like Grid.Deleting="0". After changing the global attribute, it is often needed to repaint the grid or body by RefreshBody or Refresh.
    For setting row, column or cell attribute use SetAttribute method, to show the changes, set its refresh parameter.
    You can also calculate some permissions dynamically by JavaScript API events OnCanEdit, OnCanRowAdd, OnCanRowDelete, OnCanDrop.
  • Size

    attribute is the simplest mask, it limits input to the specified count of characters.
  • Cell


    can be set to Int, Float or Date. These types permit to input only characters acceptable for given type or its format. The input character mask of the Type can be overridden by EditMask attribute, see below.
  • EditMask

    checks and validates input during editing.
    The EditMask is RegExp expression that is applied after every key press while editing the cell. When it fails, the key is ignored.
    The EditMask can be used to specify the permitted characters or to specify base structure of the requested input data. It should not be too restrictive to not bother users while editing.
    When the EditMask fails and refuses the key, it shortly blinks the cell by background color set by MaskColor.
  • ResultMask

    checks and validates input before saving to the cell value.
    The ResultMask is RegExp expression that is applied after a user presses Enter or accepts the input by any other method.
    If the ResultMask fails, it does not accept the input and continues editing. The editing can be always ended by canceling it by Esc key.
    If the ResultMask fails and ResultText is set, it alerts this message and continues editing. It also calls OnResultMask to provide custom handler for the error.
    The edited value can be also checked, validated and modified by API in events OnEndEdit (to continue editing on error), OnValueChanged (to modify the value), OnAfterValueChanged (to do something after change).
  • Validate

    attribute controls data validation before uploading changes to server.
    If the Validate is set and changes are going to be uploaded to server, it iterates all ResultsMask in grid and checks if all data are correct.
    The Validate can be set to iterate all rows (for example to ensure that no required cell is empty) or only added rows.
    When Validate finds errors, it can mark them as Error with red background and / or focus and start editing the first error cell. It can also show alert message or confirm message to let a user to upload the incorrect data anyway. It also calls API event OnValidateError for custom handling.
    The validation can be run also by Action Validate.