News in version
Buy Try it free
TreeGrid Gantt chart SpreadSheet Examples Documentation Download Development Licensing Prices References Contacts Buy Try it free
TreeGrid SpreadSheet Examples Documentation References
Gantt chart Download Licensing & prices Contacts
TreeGrid Examples Download
Gantt chart Documentation References
SpreadSheet Licensing & prices Contacts
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

Complex grid

A demonstration of many TreeGrid features

All the demonstrated features, look and behavior can be fully customized in input XML or JSON data.
Features: Tree, sorting, grouping, filtering, searching, calculations, resizing and moving columns, row dragging, row manipulations, selecting rows, fixed rows and columns, many cell types, popup default list, calendar, formatting values and many more.

  • Tree

    Tree is displayed in the "Product / Order name" column. The row children can be expanded / collapsed on click to expand / collapse image button.
    All rows can be expanded / collapsed on click to ExpandAll / CollapseAll image buttons on bottom toolbar.
    By default the child rows are displayed below their parent, you can display the child rows above their parent by checking the Reversed tree checkbox on right side of group row, the second row below header.
    This example has two levels in tree, more levels are created on grouping. But TreeGrid supports unlimited levels in tree.

  • Sorting rows

    The rows can be sorted by one or more column by clicking to the column header. This behavior can be changed in configuration menu on bottom toolbar.
    By default is the last clicked column sorted first, this behavior can be changed in TreeGrid layout XML/JSON.
    The "Pos" column is not sorted with rows and always shows the row position in sorting.

  • Grouping rows

    The rows can be grouped by dragging one or more column captions to the group row (the second row below header). Or the grouping can be chosen from the predefined grouping list in the group row.

  • Filter and search

    The rows can be filtered (hidden) by entering / selecting value and choosing filter criteria for one or more columns in filter row below header.
    There are also predefined filter criteria for month and customer in Filter orders from combos in group row right side. The rows can be filtered also entering search text or formula in search row (the third row below header) and clicking to Filter button.
    Or the rows can be selected or the found cells colored or focused and edited by clicking to Select, Mark or Find button in the search row. All the searching can be cleared by clicking to Clear button.
    The search text options are shown on clicking to Help button in the search row.

  • Calculations

    In the example there are two calculated columns, "List price" as "Amount" x "Unit Price" and "Price" as "List Price" * "Discount" - "Shipping".
    All the parent rows, including grouped parents, are calculated summary rows for their children.
    The three bottom rows are total summary rows for the root data rows.
    On the bottom toolbar right side and on the top tabber right side there are calculated counts of rows according to chosen criteria.
    All formulas in TreeGrid can be fully customized, can contain also any JavaScript code, even custom and API function calls.

  • Column manipulation

    The "Panel", "Pos", "Used" and "Product / Order name" and frozen on left side. The "Price" column is frozen on right side.
    The other columns are horizontally scrollable if there is not enough room to display them all.
    The column "Product / Order name" is automatically resized to use all the rest of available width.
    All the columns can be resized by dragging their right caption's edge. Shrinking column width to zero will recalculate the width according to its content.
    All the columns can be moved by dragging their caption to another place in header, the new expected position is marked by blue arrows.
    The column can be frozen or unfrozen by moving the column inside or outside the frozen section. The change is marked by red arrows instead of blue.
    The columns can be hidden and shown in columns visibility menu displayed on click to appropriate bottom toolbar image button.
    The whole grid can be resized in both directions by dragging in in bottom right corner. Double click to this icon restores the grid original size.

  • Row manipulation

    The header and top control rows are frozen on top. The total summary rows and bottom toolbar are frozen on top.
    The other "body" rows are vertically scrollable if there is not enough room to display them all.
    There is added empty space row below the "body" rows to fill the rest available space to preserve constant height of the grid.
    The "body" rows can be moved by mouse dragging to another position. The expected drop position is marked by icon in tree column.
    The "body" rows can be deleted by clicking Deleted button on toolbar, pressing Del key or from example popup menu. By default the deleted rows are shown colored red, they can be hidden in Configuration menu, by unchecking option Show deleted rows.
    The "body" rows can be added or copied by clicking green plus icons on toolbar, pressing Ins key or from example popup menu.
    The "body" rows can be selected by clicking or dragging panel Select button or pressing Space key or from example popup menu. The selected rows can be manipulated together, e.g. deleted, moved or copied.
    The modified rows (e.g. added, deleted, moved, edited, selected) are highlighted width appropriate color.

  • Cell types

    All the cells in the grid have set their Type that controls the cell display and features.
    Every cell (even in the same column) can have different Type and all other settings.
    The top tabber left cells are Button type with Tab, Switch and Radio features. The top tabber right cells are Html type cells.
    The header cells are not editable Text types with side Sort button.
    The filter cell have type according to the column, with left side filter operator icon.
    The controls on top control rows are Select types as not editable combos, Bool types as check boxes, Button types as search buttons and Text type for the Search expression.
    The left panel column is Panel type with control buttons, the "Pos" is not editable Int type, "Used" is Bool type as checkbox, "Product / Order name" is Text type, "Customer" is Text type with side Defaults button as editable combo. The "Date" is formatted Date type with popup calendar. "Kind" is Enum type as not editable combo. "Amount" and "Discount" are formatted Int type. "Unit price", "List price", "Shipping" and "Price" are formatted Float type.

  • Toolbar

    On the bottom toolbar are standard feature buttons, especially Reload grid, Print grid, Undo last action, Redo last action, Show columns visibility menu, Show configuration menu, Show Help.