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

Sheets

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

Dragging

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

Calendars

1. Calendars exclude

Resources

1. Resources 2. Availability

2. Combos and Checkboxes

Attributes and types for selectable popup lists and for clickable checkboxes

  • Enum

    type shows combo to select one or more values from popup list, similarly to SELECT html tag. To select more values, set Range='1'. Enum items can contain any HTML code.
    The list of values is defined by Enum attribute. The cell value can be direct value(s) from the list or the index(es) of the value in list or a key(s), if defined list of keys by EnumKeys attribute.
    The Enum and EnumKeys lists can be creates also on demand by custom JavaScript in event OnGetEnum and OnGetEnumKeys. Enum, opposite to defaults, cannot load dynamically from server side.
    The popup menu can show simple list of the defined items, or list of items with checkboxes for Range. Or you can show different texts for Enum items by EditEnum. Or you can define custom menu by EnumMenu, here you can use all advanced TreeGrid menu features like collapsing levels or submenus.
    The Enum lists in one row can be related, the list in one cell is chosen according to values in other cell(s). Set relation by Related and Clear attributes. Relation is for example Continent -> Country -> State -> Region -> City, it means that for selected continent Europe will be listed only european countries in the country combo.
  • Select

    type is simple combo similar to Enum type, with different look. It is shortcut to Type='Html' CanEdit='0' Button='Defaults'. It shows list of items to choose one or more of them to the cell. The items can contain any HTML code. The menu supports all TreeGrid menu features like collapsible levels or submenus. It is used mostly in Space rows as simple combo.
  • Button

    Defaults

    shows right side button, with popup list to choose one or more items for the cell. It can be used for any cell Type. The cell can be still editable and is possible to input different values than in the list - it differs from Enum type.
    It is set by Button="Defaults" and the list is defined by Defaults attribute. The defaults menu supports all TreeGrid menu features like collapsible levels or submenus.
    In the list can be used various keywords starting by * to show values from other cells - from this column, other column, from only some rows, the most frequent values and so on. It can be done especially in Filter cell. The automatic values can be also grouped to submenus according alphabet, when the list is too large.
    It is possible to download dynamically the list from server side (DefaultsServer='1') or to create it on demand by JavaScript in API event OnGetDefaults.
  • Attribute

    Suggest

    shows a list during typing with items suggested for actual input (like Google suggest input). It can be used for every editable cell type. Can be combined also with Button Defaults.
    The complete list is defined by the Suggest attribute and grid automatically updates the list during typing to show only items that contain (or start by) the typed text.
    There are many options set by SuggestType - when the list will be shown, case-sensitivity, accepting custom items (typed, not selected), automatic completion and so on.
    Suggest is also compatible with Range cells, suggests values for individual parts in the cell range. The Suggest list also supports keywords with * to fill it automatically from other cells like in Defaults list.
    It is possible to download dynamically the list from server side (SuggestServer='1') for actually typed value or to create it on demand by JavaScript in API event, the whole by OnGetSuggest or for actually typed value by OnSuggest.
    It is possible to use Suggest with Format and EditFormat attribute with JSON format to set different value to data and different value to show in cell.
    Suggest attribute permits creating combo box with search in the list, use such settings: Suggest="..." Button="Defaults" OnClick="Focus,StartEdit" SuggestType="existing,startall,empty,complete"
  • Attribute

    Tags

    shows Range cell values separated and marked by tags. The tags can be individually deleted by click to "x" (if set Tags="2").
    New tags can be added by editing. The last tag can be deleted by backspace. The Tags are usually used with Suggest to choose the tags from the Suggest list.
    It is possible to wrap the tags to more lines if required (when set Wrap="1" or always one per line when set TagSeparator to LF.
    It is possible to automatically sort the tags ascending, convert them to upper/lower case or delete duplicate tags, it is controlled by TagsType attribute.
  • Bool

    type shows one checkbox in cell. It has two states, checked and unchecked. It can have three states (checked, unchecked, empty) if set CanEmpty="1".
    The Bool cells can be grouped in column by BoolGroup and in row by Radio attribute. Only one Bool cell inside the same group can be checked, checking another unchecks the previous one.
    The groups can also permit or restrict all checkboxes unchecked by Uncheck attribute. There are more predefined or custom icons for the checkboxes chosen by BoolIcon.
  • Radio

    type shows more checkboxes in one cell. The checkboxes are grouped, to permit only one checkbox in the cell checked. If set RadioUncheck="1", permits also all checkboxes to be unchecked.
    The Radio can be used in Range cell, here it checks / unchecks the checkboxes independently, more checkboxes can be checked in one cell. There are more predefined or custom icons for the checkboxes chosen by RadioIcon.
    The Radio lists in one row can be related, similarly to Enum type, the options in one cell are chosen according to values in other cell(s). Set relation by Related and Clear attributes. It is even possible to related Radio and Enum types together. Related Radio can be used also in Range cells, the dependent Radio will merge options for all buttons checked in the source Radio cell.