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

6. Cell CSS style and colors

Setting CSS attributes for cell via various TreeGrid attributes

  • For style set dynamically in individual cells see DynamicStyle demonstration in tutorial Sheet cell style
  • Cell border

    (and margin and padding)
    • Class

      attribute can specify the most outer cell border color and style. It changes the default borders for the cell. It must not set cell border width. The cell border width is specified in Grid.css and for all cells in grid it must be the same.
      Remember, many styles don't set all four cell borders, so if you want to set complete cell border by Class attribute, you need to specify all the borders in Grid.css for classes GxCell...
      In Firefox 3.x are the cell borders disabled, it always collapses the cell border to have only left and bottom border.
      The cell border set by Class is around all the cell content and its Button / Icon. The Class attribute can also specify padding settings, but not margin.
    • ClassInner

      attribute can add inner cell border. It can easily specify all the border attributes and sides. It does not change the outer cell border.
      The right side Button is outside this border, the left/right side Icon can be inside or outside this border according to attribute ClassInnerIcon (0 default outside, 1 inside).
      The ClassInner can specify also margin and padding settings.
    • By




      attribute you can add next custom cell border inside the Class/ClassInner. This border does not contain the Button and Icon icons. This border is also not visible during editing. This border can be partially hidden if the cell is overflowed. There can be set also margin and padding settings.
  • Cell background

    • Color

      attribute specifies base cell background color before the color calculation.
      The base cell background color is modified by all other colors according to the row state (Added,Deleted,Moved,Changed,Selected,Error), cell permissions (CanEdit,CanFocus), Alternate color, hover color and so on. The resulted color is sum of all these colors and can remarkably differ from the Color set.
      The base color can returned dynamically by API event handler OnGetDefaultColor.
    • Background

      attribute specifies result cell background color after the most color calculations.
      The Background color is overridden only by Focus cursor and Search Mark. It means that row state colors don't modify the color set by Background.
      By API event OnGetColor you can modify the final color set to the cell (also after including Focus and Mark).
    • ClassInner

      attribute class can specify the final background color or image. This background is not affected by any cell color, even not by Focus color.
      The ClassInner can specify also background-image, but only if ClassInnerIcon='0'.
    • By




      attribute you can specify the final inner background color and image. This background is not affected by any cell color, even not by Focus color.
    • Cell background should not be set by Class attribute.
  • Wrap

    attribute permits or restricts automatic text wrapping. All cell types have by default Wrap='0' except Lines and Html that have Wrap='1'.
    The manual wrapping by including LF is always possible, to text type by "&x0a;" entity or to Html type by "<br>".
  • Align

    attribute controls horizontal alignment, "left", "right", "center".
  • Vertical alignment

    can be done by


    attribute with defined CSS attribute vertical-align.
  • Rotate

    attribute supports rotating cell text by 90 or 270 degrees.
  • Cursor

    attribute specifies mouse cursor for the whole cell. It is possible to specify Cursor to only part of the cell like Button by XXXCursor, for example Col1SideButtonCursor='pointer'.
  • Text color, font and other CSS attributes

    (CSS attributes font, color, letter-spacing, line-height, text-decoration, text-indent, text-transform, word-spacing)
    • Class

      attribute is the best place to set all these attributes, because it is the fastest, it does not add any next HTML tag into cell.
    • These attributes can be set also by ClassInner or HtmlPrefix / HtmlPostfix.
    • Format

      attribute for Int, Float and Date type cells can contain also HTML code setting these attributes, especially to highlight only part of the value.
  • Alternate colors

    TreeGrid can color every Nth row in different background color. The N repeater is set by


    attribute. The alternate color is defined in Grid.css by GxColorAlternate.
    For every row is possible to predefine its color and alternate color by Color and AlternateColor attributes.
    In tree the coloring always starts from beginning, so it can lead to break down the N repeater (e.g. to have two adjacent rows with the same color for N=2). It is because of speed reason, it is not possible to recolor the whole grid after every expand / collapse.