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

4. Cell manipulation

Filling, copying, clearing, moving individual and groups of cells

Source: 04-Cell_manipulation.xml

  • Focus cells


    One cell can be focused by mouse click to the cell. Default behavior set in Defaults.xml by <Actions> OnClickCell="FocusEdit".
    Cell range can be focused by mouse dragging by left button. Set by <Cfg>

    FocusRect

    , 1. bit (value 1)
    The focused cell or cell range is automatically selected. It also clears all previous selected ranges. Set by <Cfg> SelectingFocus='1'

  • Select cells


    Selecting cells and row/columns are independent. Set by <Cfg>

    SelectingCells

    ='3'
    One cell can be selected by Ctrl + mouse click. Default behavior set in Defaults.xml by <Actions OnCtrlClickCell="DeselectCell OR SelectCell".
    Cell range can be selected by mouse dragging by Ctrl + left button. Default behavior set in Defaults.xml by <Actions OnCtrlDragRow="InvertCellsFirst".

  • Clear cells


    Selected cells values and styles can be cleared by pressing del key. It is set by <Actions> OnDel="ClearSelectedCellsF".
    Here it clears cell values and styles as span and border. It is set by <Cfg>

    EditAttrs

    =",Span,RowSpan,BorderTop,BorderRight,BorderBottom,BorderLeft", the first empty item means value.
    More ways of clearing cells can be done from right click popup menu. It is set by <Cfg> Menu="...".
    The whole row or column can be cleared by click to row or column panel button red X.

  • Move and copy cells


    The focused cell or cell range can be moved by mouse dragging by left button the focused border line. It is set by <Cfg>

    FocusRect

    , 5.bit (value 16).
    Copying instead of moving can be done by dragging with Ctrl.
    It moves or copies cell values and styles. It is set by <Cfg>

    EditAttrs

    =",Span,RowSpan,BorderTop,BorderRight,BorderBottom,BorderLeft".

  • Auto fill cells


    Cells can be auto filled by mouse dragging by left button the bottom right corner of focused border. The corner is shown by <Cfg>

    FocusRect

    , 2. bit (value 2)
    It fills cell values and styles. It is set by <Cfg>

    EditAttrs

    =",Span,RowSpan,BorderTop,BorderRight,BorderBottom,BorderLeft".
    The auto filling increases the numbers in its direction. It clears values if the cell range is shrunk. It is set by <Cfg> AutoFillType='31'.

  • Copy & paste cells


    Focused cell or cell range can be copied to clipboard by Ctrl+C. Copying only focused cells is set by <Cfg> CopyCols='0'.
    Focused cell or cell range can be copied and cleared by Ctrl+X. Clearing cell values is set by <Cfg> ExcludeClear='1'
    Copied cell or cell range can be pasted to grid by Ctrl+V. It is pasted to focused cell range or if only one cell is focused to next right and bottom cells. It is set by <Cfg> PasteCols=5 and PasteFocused='11'.
    If copied and pasted inside grid, it copies also cell styles like border and span as set by <Cfg>

    EditAttrs

    =",Span,RowSpan,BorderTop,BorderRight,BorderBottom,BorderLeft". If copied or pasted outside grid, e.g. to MS Excel, it copies and pastes only cell values.

  • Other features


    • Rows can be hidden, shown, deleted or undeleted on click to the left panel button red X.
      New rows can be added or copied on click to the left panel green + or to click to toolbar button green +.
      All focused rows together can be hidden, shown, deleted, undeleted, copied or added from header panel.
    • Columns can be hidden, shown, deleted or undeleted on click to the top panel button red X.
      New columns can be added or copied on click to the top panel green + or to click to toolbar second button green +.
      All focused columns together can be hidden, shown, deleted, undeleted, copied or added from left index panel.
    • Selected cells can be spanned on click to toolbar button Span or from right click popup menu.
      Spanned cell or selected cells can be split on click to toolbar button Split or from right click popup menu.
      It is set <Cfg> DynamicSpan='2'.
    • Cell border or border of selected cells can be set or cleared from right click popup menu.
      In this sample there are hardcoded two borders, outer 3px solid black and inner 1px solid black.
      It is set by <Cfg> DynamicBorder='1'.
    • Last action can be undone by clicking to toolbar button Undo or by Ctrl+Z.
      Last undone action can be redone by clicking to toolbar button Redo or by Ctrl+Y.
      The undo is for all actions, including focus, select and scroll. It is set by <Cfg> Undo='79'.