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

1. Resources

Assigning resources and prices to tasks and showing their summary usage

Source: 01-Resources.xml - Resources chart shown in the same grid in fixed rows
In this example the resource usage chart in the first grid is not fully updated by changes done in the second grid, because in real application it is not expected to show two resource charts for one data

Source: 01-Resources_grid.xml - Shows resource usage from the previous grid
  • Resource list

    The list of available resources is defined in root Resources tag, the individual resources are defined inside by R tags.
    The R tag can have these attributes:
    • Name as unique identification of the resource.
    • Text as optional resource name to be displayed instead of the Name in popup resources menu.
    • Price as price of the resource used in calculation of task or project price.
    • Availability as count of the available resources, when actual resource usage exceeds this count, the bars in Resource chart are displayed in red.
      The Availability can also contain one or more date ranges to specify the resource counts depending on dates.
      The Availability can be easily edited by users in dialog by Dates type Button.
  • Resource assign

    The resources are assigned individually per main bar plan by


    attribute, where the X is the main bar plan number, empty for the first one.
    The resources for run bar (when GanttTask contains "Run") are assigned by


    The resources for run box (when GanttTask contains "Box") are assigned in the box attribute


    in the GanttRun definition.
    The format is: name1*amount1+extra1;name2*amount2+extra2;...
    For run box resources definition is the ';' separator replaced by '#'.
    • Resources are separated by semicolon (defined by <Format ValueSeparator/>). The name and amount are separated by asterisk (defined by <Format CountSeparator/>). The extra is separated by plus (defined by <Format AddSeparator/>).
    • The name is resource Name.
    • The amount is amount of resource units per task data unit. The amount can be omitted if it is 1 and the extra is not used or is 0 and extra is used.
    • The extra are extra resource units independent on the task duration. The extra can be omitted if it is 0.
      If the name and amount are omitted, the extra is extra price for the task independent on resources and task duration. There should be only one such extra price per task.
    The resources can be assigned by users in Gantt popup menu, shown by action EditGanttResources attached by default to OnDblClickGantt event.
    The resources can be also changed in right click Gantt popup menu, "Change resources" menu item.
    • Attribute


      specifies how the resources are chosen in the resources menu, possible options are:
      0 - single resource, 1 - resources without count, only checkboxes shown, 2 - resources count can be selected in combo 1 - 10, 3 - resources count is editable integer, 4 - resources count is editable float, 5 - only extra resource units and task price.
    • Attribute


      controls if and how can be added the extra prices for the resources.
      0 - none, 1 - one extra price per whole task, 2 - extra units per resources, 3 - both.
      If permitted extra price per task, the resource names should not be numbers.
    • Or the resources menu can be defined by custom


      as standard TreeGrid JSON menu.
  • Resources filter

    The tasks can be filtered according to assigned resources, to show only tasks for selected resources.
    The predefined filter can be set by GanttResourcesFilter attribute.
    Users can choose the resources to filter in Space cell of Type SelectGanttResources.
  • Resources calculation

    There are three calculation functions to use in formulas for support of calculation resources.
    • ganttresourcepeak returns maximal count of the resource used in grid at one time.
    • ganttresourceunits returns count of all allocated units for given resource in the whole grid.
    • ganttresourceextra returns summary of extra prices assigned to tasks for given resource, or for all extra prices for whole task.
    There are also three support API function for custom resources calculation.
    • GetGanttPrice returns price of the task according to its duration and assigned resources.
    • GetResourceErrors returns all errors or usage in grid for the resource name in two dimensional array.
    • GetResourceUsage returns Availability string as usage of given resource in chart.
    • GetGanttResourceCount returns information about given resource usage in given date range (peak, units or average usage).
  • Resources usage chart

    It is special Gantt chart row showing usage of one resource in the whole project.
    The cell shows the Resource usage chart when set


    to special format specifying the chart type.
    The GanttAvailability format is: resource_name#chart_type#def_name, where chart_type can be:
    • 1 - resource usage by the tasks in chart. Uses Green class by default.
    • 2 - resource usage, for Work is the same as 1, for Material shows constant usage, not incremental. Uses Green class by default.
    • 3 - availability chart, shows chart for the resource Availability value. Uses Yellow Class by default.
    • 4 - actual availability at given times, for Work it is the same as 3, for Material is similar to 5, but shifted by one GanttDataUnit. Uses Yellow Class by default.
    • 5 - free resources chart (availability minus usage). Uses default (blue/red) class by default.
    • 6 - resource errors (availability minus usage, only negative values). Uses Red class by default.
    • 7 - resource errors, positive (availability minus usage, only negative values as positive values). Uses Red class by default.
    • 8 - resource errors, full (availability minus usage, only negative values as full usage at given time). Uses Red class by default.
    The def_name is optional name of Def row, to show resources from only rows with this attribute.
    The number format is set by GanttAvailabilityFormat attribute.
    The Resource usage chart shows bars (blue, red or yellow), one per one GanttUnit, with number as count of resources consumed in the GanttUnit.
    The blue bars are for resource usage, red bars for resource errors and yellow bars for resource availability.
    The bar colors can be redefined by GanttAvailabilityClass attribute.
    The resource usage chart can be shown in the same grid as the source tasks, usually in fixed rows, or in another grid, see below.
  • Automatically generated Resources usage chart

    It is possible to automatically create the Resource usage chart from source in another grid.
    The resources list can be modified, the resources can be added, deleted, changed or renamed via the resource chart.

    The source grid must contain tasks with resources and resource list. The source grid can be even hidden, to work only as data source for the Resource usage chart, set <bdo Hidden='1' ... >
    The resource grid should have defined only layout xml, because body rows are automatically generated from the resource list in source grid.

    The resource grid must define these <Cfg> attributes:


    as id of the source grid and GanttResourceName, GanttResourcePrice and GanttResourceAvailability as columns in resource grid, where will be shown these attribute of source R tag.
    For more information see documentation.