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

SpreadSheet

A demonstration of cell based spreadsheet program

Demonstrates features in SpreadSheet TreeGrid module.
Features: Editable formulas with suggest menu and choosing cell range during editing; Row and column index; Auto adding new rows and columns on scroll; Dynamic cell border; Dynamic cell style; Dynamic and automatic cell format and type; Mass changes like Clear, Move, Copy, Paste, AutoFill with all cell attributes.
  • Index


    The rows and columns are in formulas addressed by their index instead of row id or column name.
    The column index is shown in top header, the column index here consists from letters A-Z. The row index is shown in left column, the row index here is a number from 1.
    To compare, the column name is shown in bottom row and row id in right column - the id and name is not changed when the row or column moved, added or deleted, but the indexes are always updated.
  • Auto pages


    New rows and column are automatically added to sheet end when you scroll bottom or right end. Empty pages are automatically removed after some time if they are not visible and focused.
  • Dynamic cell border


    Every cell can have set its border on one or more its edges. The border between adjacent cells is shared. If more cells define the same border edge, the right and bottom cell is preferred.
    There are 8 predefined border width and styles in TreeGrid: 0px, 1px solid, 2px solid, 3px solid, 1px dotted, 2px dotted, 1px dashed, 2px dashed. Every border style can have any color.
    Set it on Toolbar Border button or from popup menu.
  • Dynamic cell style


    Every cell can have set various text styles as: bold font, italic font, underline, strike, overline, small caps. Font name and size. Text color, text shadow and cell background color. Horizontal and vertical alignment, rotate and wrapping. Set it on appropriate Toolbar button or from popup menu.
  • Dynamic cell span


    Every cells can be spanned together horizontally or vertically. The row and column span just cannot cross. Set it on Toolbar Span/Split button or from popup menu.
  • Mass cell change


    Selected cell ranges can be modified together and all their values, formulas and attributes like border, style and span are affected too.
    The mass changes are: Clear cells by Del key, move cells by mouse dragging the focused edge, copy cells by mouse dragging the focused edge with ctrl, auto fill cells by mouse dragging the bottom right corner of focused range, copy & paste by Ctrl+C, Ctrl+X and Ctrl+V.
  • Columns and rows changes


    The rows and columns can be selected by clicking or dragging their Panel Select button.
    The individual or selected groups of rows and columns can: move by dragging their Index, copy by dragging their Index with Ctrl, delete, hide, show on click to panel Delete button, add or copy on click to Panel Copy button.
  • Popup menu


    All cell, row and column actions are available also from popup menu shown or right click.
  • Editable formulas


    In every cell you can enter its formula starting by '

    =

    '. Cell value will show the formula result.
    • Cell references


      Every formula can use value from another cell or cell range. The cell(s) can be addressed relatively (e.g. "A1") or absolutely by $ (e.g. "$A$1").
      • The row and columns change their index whenever they or previous items are moved, deleted or added.
        All formulas (both absolute and relative) are updated accordingly after any Index change to refer still the same original rows and columns.
      • If relative formula is copied, it changes for the difference between indexes in old and new location. So the relative formula (without $) refers the new destination location.
        If absolute formula is copied, it never changes. So the absolute formula (with $) refers the original location.
      • If formula is moved (both absolute and relative), it changes for the difference between indexes in old and new location.
        But it does not change if all the source (referred) cells were moved too.
      • If formula references range(s), only the range bounds are absolutely defined and the range always contains rows and columns actually placed between the range bounds.
      The cell reference can be also pick up by mouse click or dragging during formula editing.
    • Operators


      Default operators use standard C++/JavaScript syntax: +, -, *, /, ! (not), % (modulo), & (bit AND), | (bit OR), ^ (bit XOR), && (logical and), || (logical OR), <<, >> (bit shift), == (equals), != (not equals), <= (less or equal), >= (greater or equal), < (less), > (greater).
      There are added more operators: = (equals), <> (not equals), ?: (condition three arguments as "condition?result_true:result_false").
      Priority of operators is the same as in JavaScript and cannot be changed. Always you can use ( ).
      There are defined constants: pi (3.14), ln2 (ln(2)), ln10 (ln(10)), log2e (log2(e)), log10e (log10(e)), sqrt2 (sqrt(2)), sqrt1_2 (1/sqrt(2)).
    • Functions


      There can be used also these aggregate functions:

      sum

      ,

      sumsq

      ,

      count

      ,

      counta

      ,

      countblank

      ,

      max

      ,

      min

      ,

      product

      .
      The functions accept as parameters value constants (e.g. 100), single cell reference (e.g. A1) or cell range reference (e.g. A1:B4). In the range the bounds are separated by colon '

      :

      '. The functions accept more parameters separated by comma

      ,

      .
      There are also defined standard JavaScript mathematical functions: abs(x), round(x), ceil(x), floor(x), exp(x), log(x), pow(x,y), sqrt(x), sin(x), cos(x), tan(x), asin(x), acos(x), atan(x,y).
      There are also defined date functions: date(year,month,day,hour,minute,second), date(date,format), time(hour,minute,second), time (time,format), now(), today(), year(date), month(date), day(date), weekday(date),weeknum(date), hour(date), minute(date), second(date).
      And one formatting function: text(value,format,type) to convert date or number to string.
      Available functions are suggested during editing after first characters are typed.