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

2. Row types

TreeGrid rows by kind and by position


Source: 02-Rows.xml
  • See Row basics documentation.

  • Rows by position


    There are three row types in TreeGrid according to the position and structure:

    • Variable rows

      (Scrollable, Body section)
      • Contain cells in columns. Cells can be spanned in both directions, similarly to HTML <TABLE> tag. Cells can be spanned vertically only within root row page, horizontally in column page and column section.
      • Only variable rows can be: scrolled vertically, nested in tree, sorted, filtered, grouped, paged, added, deleted, moved (dragged) inside the Body section
      • Can contain only data rows, not feature rows.
      • Defined as

        <I>

        tags inside

        <Body><B> ... </B></Body>

        tags.
        The <B></B> is a page. Only grid using server paging can contain more pages in data, all other grids have all rows in one page.

    • Fixed rows

      (Frozen, Head and Foot section)
      • Contain cells in columns. Cells can be spanned in both directions, similarly to HTML <TABLE> tag. Cells can be spanned vertically only within the section (Head or Foot), horizontally in column page and column section.
      • Can contain data rows and these feature rows: <Header/> and <Filter/>
      • Defined as

        <I>

        (or <Header/> or <Filter/>) tags inside

        <Head> ... </Head>

        (above variable rows) and

        <Foot> ... </Foot>

        (below variable rows) tags.
      • There is one predefined fixed row <Header id='Header'/> as main header containing column captions. It is defined by

        <Header/>

        tag placed directly in <Grid> tag.

    • Solid space rows

      (Floating, Solid sections between other section)
      • Define their own cells (in Cells array) not related to TreeGrid columns. Every Space row can have different cells (their names, widths and other attributes like Type and Format). The cells cannot be spanned in any direction.
      • Can contain data rows (but with their own cells!) and these feature rows: <Toolbar/>, <Group/>, <Search/> and <Tabber/>
      • Defined as

        <I>

        (or <Toolbar/> or <Group/> or <Search/> or <Tabber/>) tags inside

        <Solid> ... <Solid>

        tag.
      • Place in grid is set by their Space attribute (-1 above grid, 0 above Head, 1 between Head and Body, 2 between Body and Foot, 3 between Foot and scrollbar, 4 below scrollbar, 5 below grid.
      • Place outside grid is set by Tag attribute.
      • There is one predefined solid row <Toolbar id='Toolbar'/> as main toolbar containing basic TreeGrid buttons. It is defined by

        <Toolbar/>

        tag placed directly in <Grid> tag.
      • To place some cells to right edge or to fill the rest of the row by cell(s), set the cell RelWidth attribute.
      • See Solid space rows documentation.

  • Rows by kind

    • Data rows

      • Data rows are base TreeGrid rows with data. They are expected to load their cells data from server and optionally upload the changes back.
      • Can be used in all three rows section (Variable, Fixed and Solid). Only data rows can be placed in Variable section.

    • Feature rows


      Feature rows to control particular TreeGrid feature. Every special row can be placed in grid more times.
      The feature rows values are usually saved to cookies and not uploaded to server, although uploading to server is also possible.
      All the Solid feature rows can be defined also by normal Space rows with cells - to merge functionality of more feature rows in one row (e.g. show grouping and search settings on toolbar).
      • Header row defined by <Header> tag. Can be placed only in Fixed rows. Shows column captions. Provides column resizing and moving. Controls sorting settings.
        Header row has cells like any data row, it is possible to define Type, Format and other cell attributes like <Header Col1='Column &lt;b>1&lt;/b>' Col1Type='Html'/>.
        The Header cells are not editable, but can be changed from popup list like Defaults. The default cell Type for Header row is Lines, new line can be added by '&#x0a;' or can be retyped to Html and used <br>.
      • Filter row defined by <Filter> tag. Can be placed only in Fixed rows. Controls filter settings. See Filter row documentation.
      • Group row defined by <Group> tag. Can be placed only in Solid rows. Controls grouping settings. See Group row documentation.
      • Search row defined by <Search> tag. Can be placed only in Solid rows. Controls search settings. See Search row documentation.
      • Toolbar row defined by <Toolbar> tag. Can be placed only in Solid rows. Shows control image buttons. Nearly normal Space row with predefined type of new cells and different look. See Toolbar kind row documentation.
      • Topbar row defined by <Topbar> tag. Can be placed only in Solid rows. Shows control image buttons. Just different look than Toolbar. See Topbar kind row documentation.
      • Tabber row defined by <Tabber> tag. Can be placed only in Solid rows. Shows control tabs buttons. Nearly normal Space row with predefined type of new cells and different look. See Tabber kind row documentation.