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 Large table with paging Large table without paging Multiline & images - books Positions and spanning Photo album - images Dynamic Adobe Flash Dynamic MS SilverLight PivotTable - 2D grouping Schools - list and ratings File and directory browser Extended JavaScript API Sharing & synchronisation 1 000 000 rows, 1 000 cols

Sheets (new)

Microsoft Excel sheet TreeGrid sheet

Gantt and bar charts

Gantt & Network chart Simple Gantt chart Big Gantt chart - 1000 rows Gantt chart tree by grouping Resources usage chart Run chart - bar chart Grouping bars - run groups 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

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

Live Sheet tutorials
Sheet features (new)

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&names) 7. Editable formulas (indexes) 8. Cell format 9. Outside edit

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

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

1. Edits - Inputs and Multiline

Basic editable cells for direct editing in input or textarea

  • Basic information

    - all cell types and attribute groups
    TreeGrid supports these cell types:
    • Inputs: Text single line string, Lines multiline string, Int integer number, Float decimal number, Date date and / or time.
    • Combos: Select simple combo, Enum extended combo.
    • Checkboxes: Bool checkbox, Radio radio buttons.
    • Buttons: Button action button, tab or combo, Panel more control buttons.
    • Html: Html any HTML code, Icon simple image, Img extended image, Link extended link, List repeating HTML, Abs absolutely positioned HTML tags in one cell.
    • Special: Gantt Gantt chart, Chart line chart, DropCols dragged column names.
    Every type has various settings, basically done by Format and EditFormat attribute, but many types have their own special attributes to control their functionality.
    There are also attributes that can be used for most types to extend their functionality:
    • All types: Button right side button, Icon left side icon, Link clickable link, Tip text shown on mouse hover, ShowHint cell shows its whole content on mouse hover, Menu right click popup menu.
    • Editable types: Defaults popup list to choose predefined value for the cell, Suggest popup list of suggested value for given input, EmptyValue HTML shown when the cell value is empty, Range more values in one cell.
    • Validation: EditMask validation during editing, ResultMask validation after finish editing.
    • Span: RowSpan rowspan, Span colspan, Merge more spanned values in one cell.
    • Style: Class CSS class for the cell, ClassInner added CSS class to the content, Color computed background color, Background exact background color, Cursor mouse cursor, Wrap wrapping to more lines, Align horizontal alignment, Rotate 90,180,270 degrees, HtmlPrefix HTML before cell content, HtmlPostfix HTML after cell content.
    All the cell attributes like Type, Format, EditFormat, Enum, Range, Button, ... can be set to whole column in <C> tag (e.g. <C Name='Cols1' Type='Int'/>) or to individual cell in <I> tag with column prefix (e.g. <I Col1Type='Int'/>).
    The cell value and any cell attribute except spanning can be dynamically calculated by Formula.
  • API for cells

    • The Type, Format and EditFormat values can be changed or generated dynamically by API events OnGetType and OnGetFormat.
    • The resulted HTML shown in the cell can be changed or generated dynamically by API event OnGetHtmlValue.
    • The cell value can be read by API methods GetString or GetValue and set by SetString or SetValue.
    • To catch a change of the cell value can be used API events OnValueChanged, OnAfterValueChanged, OnEndEdit and XML event OnChange.
    • Any cell attribute can be read by API global function Get or by method GetAttribute. Many cell attributes can be changed by method SetAttribute.
    • The row or cell content can be updated by RefreshRow or RefreshCell methods. The cell DOM tag can be got by GetCell method, but the DOM content should be used only as read-only.
  • Text

    type shows plain editable text in one line, without any special input / output rules. It preserves all white space. It is default cell type.
    The text display can be formatted by Format - the text can be converted to lower or upper case, can be replaced by given RegExp expression and can append some prefix and postfix.
    The decimal and group separators can be changed by <Lang><Format DecimalSeparator='.' GroupSeparator=','/></Lang>.
  • Float



    types. Show formatted numbers. Int is for integer numbers, Float is for decimal point numbers, but the only difference between them is that Int does not accept decimal separator in editing.
    The number format for display is set by Format attribute, it specifies required count of digits, required and maximal count of decimal places, displaying group separator, minus sign, exponential notation, percentage.
  • Date

    type shows date, time or date and time. For date it supports calendar dialog to pick up the date, more dates or date range(s). To hide calendar button for time, set Button="".
    The date or time format is specified by Format attribute, the format for editing by EditFormat. If the EditFormat contains time part, calendar dialog will let you edit also time.
    The Date can show also more dates or times or date ranges (set by Range='1'). If set, the calendar dialog will let you select more dates or date range.
    The Format attribute has similar syntax as ASP.NET ToString method, it can contain also HTML code.
    Date values in input / output XML can be in count of milliseconds since 1/1/1970 or in string in English format (M/d/yyyy or yyyy-MM-dd or d.M.yyyy + HH:mm:ss), for output format see DateStrings attribute.
  • Pass

    type is simple text input as password that does not display the input characters. Remember, the password is sent to server not coded.
  • Lines

    type is multiline text, automatically or manually wrapped by CRLF. To not automatically wrap the text set Wrap='0'.
    LF (new line) can be put into XML by &#x0a;. By default key enter finishes editing, to let users to insert LF by Enter key, set AcceptEnters='1', the editing will be finished by Ctrl+Enter or Shift+Enter.
    You can specify maximal row height in pixels by MaxHeight attribute. The higher cells will be overflowed. It affects only multiline cells.