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

4. Default rows and columns

Predefined values for more rows and columns

  • Default rows


    • See Default rows documentation.
    • Default row predefines all row attributes that the row does not explicitly set. Setting attribute to empty string overrides the default value.
      For example if set <D Name='XXX' A='DefA' B='DefB'/> and <I Def='XXX' A='RA' C='RC'/>, the row will have these three attributes A='RA' B='DefB' C='RC'
    • Every row in grid has set always one default row. The default row is set by the row attribute

      Def

      . Unlike columns and defaults, the row Def attribute can contain only one item!
      If the row has not set Def attribute, its value is read from parent row

      CDef

      attribute. The CDef attribute is used also to set Def for all new children added to the parent.
      Default CDef value for root variable rows can be set by root <Root CDef="..."/> tag.
    • If row has set neither Def nor its parent CDef, its default row is set to "R" for variable rows, "Header" for header rows, "Fixed" for other fixed rows and "Solid" for solid rows.
      The "R", "Header", "Fixed" and "Solid" defaults are defined in Grid/Defaults.xml, but is possible to change them in any your XML.
      There is also one predefined default row "Group" that is used by default for all rows created by grouping, see 03-Grouping_rows tutorial.
      And one default row "CPage" used for child rows created by MaxChildren settings, see Paging in tree - MaxChildren documentation.
      Note that Fixed and Group default rows inherit the "R" default row too (have Def='R'), but the Header, Solid and CPage default rows don't inherit anything (have Def='').
    • The default rows are defined by

      <D/>

      tag in root

      <Def> ... </Def>

      tag.
      Every default row <D> must have set its attribute

      Name

      to identify the default row. This value is used in row's Def and CDef attributes to link this default row.
      Default row can also define its Def attribute to inherit it from one or more other default rows. More items are comma separated. Default value for Def attribute is "R", so by default all default rows inherit default row named "R".
    • The <D> tag can have also child <I> tags. When added new row of this default row, it will automatically get new created children as these defined <I> tags.
      It is possible to have only one level of such <I> children of default row. But the child <I> tags can have set their Def attribute and if this default has also child rows, they are added too. In such way you can create many levels of children for one new row.
    • Default row is used also for permissions when moving row to new parent. The row is accepted only if its Def attribute value is listed in the new parent row AcceptDef attribute.
      For more information see 01-Dragging_rows tutorial.
    • By

      API

      you can access the default row by Grid.Def[name]. It is possible to directly read and write the default row attributes like Grid.Def["R"].Color = "Red";
      The inheritance between two default rows (by the <D Def/>) is resolved on grid start, so changing one default row attribute by API will not affect any other default row.
      Read the row attribute including the default value by global Get method or by grid methods GetAttribute or GetValue.
      You can get the row's default row object by row.Def and its name by row.Def.Name.
  • Default columns


    • See Column basics documentation.
    • Default column predefines all column attributes that the column does not explicitly set. Setting attribute to empty string overrides the default value.
      For example if set <D Name='XXX' Color='Red' Class='Blue'/> and <C Def='XXX' Class='Green' CanEdit='0'/>, the column will have these three attributes Color='Green' Class='Blue' CanEdit='0'
    • Every column in grid has set one or more default columns. The default columns are set by the column attribute

      Def

      . More items are comma separated.
      If column has not set the Def attribute, its default column is "C", only for Gantt type column it is "Gantt". The "Gantt" default column inherits also the "C" column.
      The "C" and "Gantt" default columns are defined in Grid/Defaults.xml, but is possible to change them in any your XML.
    • The default columns are defined by

      <D/>

      tag in root

      <DefCols> ... </DefCols>

      tag.
      Every default column <D> must have set its attribute

      Name

      to identify the default column. This value is used in column's Def attribute to link this default column.
      Default column can also define its Def attribute to inherit it from one ore more other default column. More items are comma separated. Default value for Def attribute is "C", so by default all default columns inherit default column named "C".
    • By

      API

      you cannot access the default columns (unlike default rows). The default columns are processed on grid start, all columns read their not set attributes from default columns on start.
      To access column attribute use GetAttribute API method or directly by Grid.Cols[name].
    • Note, Header rows don't read their cell attributes from columns, only from the header row or its default row.