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

1. Row tree

Expanding and collapsing rows

  • The tree is shown when defined Cfg attribute

    MainCol

    . It specifies column name, where the tree (expand / collapse buttons) is shown.
  • By default the children are shown below their parent. To show children above their parent like in MS Excel outline set Cfg attribute

    ReversedTree

    ='1'.
  • Creating row tree


    Only variable rows can be shown in tree.
    • The rows can be placed into tree directly in input data by nesting the <I> tags.
    • Or the tree can be created automatically by Grouping feature. It is demonstrated in next example.
    • Or the two methods can be used both together, some rows can be nested by default and they can be still grouped to create deeper tree.
  • The initial state of the parent rows is set by their

    Expanded

    attribute.
  • To restrict collapsing (or expanding) the row's children, set

    CanExpand

    ='0'.
  • To show custom expand / collapse icon for any row or row level use row attribute TreeIconX, where X is number 0 - 5 for given icon and state:
    0 - not expandable, 1 - last not expandable, 2 - expand (+), 3 - last expand (+), 4 - collapse (-), 5 - last collapse (-).
  • The expand / collapse button can be shown also in other column than the main column by Button='Expand' or Icon='Expand'.
    To hide the expand / collapse button in the main column in this case you can set CanExpand='2'.
    If state of this button can be changed by another action (e.g. by Expand all or click to another button), the cell should be refreshed, usually in OnExpand API event.
  • To permit expanding tree to given level set cell attribute

    Levels

    ='1' in header in main column. It shows button for every row level, like in MS Excel outline.
  • It is possible to hide tree lines by Cfg attribute NoTreeLines='1'.
    It is possible to hide the root tree in case the first level rows should not be expanded by Cfg attribute HideRootTree='1'.
    For small grids it is possible to save the Expanded state of all rows to cookies (by their ids) by Cfg attribute SaveExpanded='1'
  • To scroll to show all parent's children when the parent is expanded, set Cfg attribute NoScrollAfterExpand='0'.
  • To the row ids can be automatically their parent to be unique withint the whole grid.
    For this behavior set Cfg attribute

    FullId

    ='1'.
    The ids are merged together by '$'.
  • API


    • In API every row has set its Level attribute. It is 0 for root rows, 1 for first level rows and so on. For page it is -1.
    • On every expand or collapse is called OnExpand API event.
    • The row can be expanded by method Expand, collapsed by Collapse.
      All rows can be expanded by method ExpandAll, collapsed by CollapseAll.
      Expanding all rows has various settings, because there are various issues, e.g. in server paging it could lock grid by expanding too many rows.
  • Tree in different columns without nesting

    • It is possible also to expand different rows in different columns.
      In this case the rows don't need to be nested in tree, you can just specify which rows will be shown/hidden by which expand button.
      It is possible to use both ways (rows in tree and hiding / showing rows) in the same grid.
    • This way is slower than row tree, because the rows are shown / hidden one by one.
    • Define

      Button='Expand'

      or

      Icon='Expand'

      in the selected cell and by cell attribute

      ExpandRows

      specify the rows (by comma separarated list of their ids) that will be shown / hidden by clicking to that button.
    • It is even possible to let more buttons (in the same or even different row) to control visibility of the same rows.
      You can set row attribute ExpandLevel to specify how many expand buttons must be turned on to show the row. It controls also initial state if some buttons are already expanded on start.
    • By API you can expand / collapse these rows by ExpandCell method and check if the cell is expanded by IsCellExpanded
    • In the same way can be controlled also column visibility, see the next tutorial 2. Column tree.
  • Custom

    checkbox in tree


    Show checkbox to check / uncheck row in main column by Icon='Check'. Checkbox in parent row shows state of its child checkboxes.
    After a user changes some checkbox state, the other parent and child checkboxes are updated too.
    The checkbox value is stored in attribute XXXChecked, where XXX is the (main) column where the checkbox is shown.
    The checkbox meaning / function is custom and TreeGrid does not use it for any its action.
    To upload this value to server, define new hidden column to server as <C Name='XXXChecked' Visible='0' CanHide='0'/>.
    To use the side check box just as simple one without checking other rows set actions like <Actions OnClickSideCheck="Focus,Grid.SetAttribute(Row,Col,'Checked',!Is(Row,Col+'Checked'),1),1" OnDblClickSideCheck="" />