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

3. Columns and sections

Columns in three horizontal sections

  • See Column basics documentation.
  • Description

    The column defines the name, size and position of all the cells in it. Optionally it defines the cell attributes like Type or Format for all cells in it, these attributes can be redefined in individual cells.
    The column does not define data, data are defined only in row cells. The columns control only cells in Variable and Fixed rows, not in Solid rows.
    For cell types, formats and other attributes see Cells tutorials.
  • There are three column sections in TreeGrid, left, middle (variable) and right.
  • Definition

    The column is defined by


    tag. Left columns are defined in

    <LeftCols> ... </LeftCols

    tag, Middle (variable) columns are defined in

    <Cols> ... </Cols

    tag, Right columns are defined in

    <RightCols> ... </RightCols

  • Width and scroll of column sections

    By default only the middle section is horizontally scrollable, the left and right sections are fixed and always visible, except there is no room for them.
    Set the sections default and minimal sizes to be all three sections scrollable and resizable (<Cfg LeftWidth MidWidth RightWidth/> and <Cfg MinLeftWidth MinMidWidth MinRightWidth/>).
    See Widths of individual sections documentation.
  • Visibility

    By default are all the defined columns visible. Set <C Visible='0'/> to not show the column.
    Columns can be shown / hidden by users in columns menu (shown by click to icon on default toolbar). Set <C CanHide='0'/> to not show the column in the menu.
    See Column visibility documentation.
  • Moving

    The column can be moved (dragged by mouse) inside or outside its section by dragging its caption in Header. Set <C CanMove/> to permit if and where the column can be moved.
    To move some columns together set their <C Group/> attribute to the same value. Useful especially for spanned cells.
    See Column position and moving documentation.
  • Width

    The column width is set by <C Width/> attribute. If the Width attribute is missing, the column width is calculated to fully show the first 100 cells in the columns. The calculation can be slow if the grid has many columns.
    The column can fill the rest of the main div tag width if set <C RelWidth/> attribute.
    The column sections can be resized by dragging the section edge. Set <Cfg LeftCanResize RightCanResize/> to control if and when the sections can be resized.
    See Widths of individual sections documentation.
  • Resizing

    Column can be resized by mouse dragging the column caption edge in Header. Set <C CanResize='0'/> to restrict it.
    If the header has spanned cells, dragging the spanned cell edge resizes always the last column in the spanned range.
    See Column width documentation.
  • Configuration in cookies

    Columns visibility, position and sizes are saved to cookies by default. To avoid it, set <Cfg SuppressCfg='1'/> to not save the whole grid configuration,
    or set <Cfg ColsLap='1'/> to not save any column attribute or <Cfg ColsPosLap='1'/> to not save positions or <C WidthLap='1'/> or <C VisibleLap='1'/> to not save particular column width or visibility.
    The column sections widths will not be saved if set <Cfg SectionWidthLap='1'/>.
    Only the scroll position is not saved by default, permit it by <Cfg ScrollLeft='0'/> (and/or <Cfg ScrollTop='0'/>).
    See Configuration in cookies documentation.
  • Panel

    There is one predefined column named Panel defined by <Panel> tag directly inside <Grid> tag as row left panel containing control buttons for individual rows.
    See Panel Type documentation.
  • Pager

    There is special object Pager that can be placed on left or right grid side (chosen by Left attribute). It is not a column. It shows a clickable list of items.
    The pagers are defined by


    tag in

    <Pagers> ... </Pagers>

    tag. There can be more pagers in one grid.
    The pager can show a list of root pages in grid (Type='Pages'). Or date ranges for paging in Gantt (Type='Gantt'). Or any custom list of items defined by API (Type='Custom').
    See Pager documentation.
  • API

    • Access (read and write) the column attributes by Grid.Cols[name].attr (e.g. G.Cols.Col1.CanEdit = 0;). Or use GetAttribute / SetAttribute API method.
    • To iterate all column names in grid use such loop: for(var col in Grid.Cols). Or call GetCols API method to get the column names sorted by their position. Or use GetFirstCol / GetNextCol API methods in a loop.
    • To manipulate columns use API methods like AddCol, DelCol, ShowCol, HideCol, MoveCol, SetWidth (resize).
    • See Column API documentation.