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

3. Row and column manipulation

Adding, copying, deleting, moving, hiding individual or groups of columns and rows

Source: 03-Row_and_column_manipulation.xml

  • Rows


    • Rows can be selected or unselected by clicking to or dragging left Panel Select button or by pressing Space. It is default behavior set in Defaults.xml by <Cfg Selecting='1'.
      All rows can be selected or unselected by clicking to Header Panel SelectAll button. It is default behavior.
      Here the SelectAll button is a switch showing if all rows are selected. It is set by <Cfg> SelectAllType='31'.
    • Rows can be resized by mouse dragging its edge in Index column. It is set by <C> Resizing='1' in the Index column definition.
    • Rows can be moved by dragging the Index column. It is default behavior set in Defaults.xml by <Cfg> Dragging='1' Dropping='1'.
      Dragging by other columns is overridden by focusing cells by FocusRect.
      If dragged selected row, all selected rows are moved to the destination.
    • Rows can be copied by dragging the Index column with Ctrl. It is default behavior set in Defaults.xml by <Cfg> Dragging='1' Dropping='1' Adding='1' Copying='1'.
      If dragged selected row, all selected rows are copied to the destination.
    • Rows can be copied or added by clicking to left Panel Copy button. It is shown by <Panel Copy='1'/>.
      The Copy menu permits copying or adding one row, all selected or all focused rows.
      Selected or focused rows can be copied or added also by clicking to toolbar Add button.
    • Rows can be deleted or undeleted by clicking to left Panel Delete button or by pressing Del.
      Selected rows can be deleted or undeleted by clicking to Index Panel DeleteAll button.
    • In this sample rows can be hidden or shown by clicking to left Panel Delete button, its Menu contains items also for hiding / showing rows.
      In this sample also any fixed row can be hidden from right click popup menu by custom action, see the Menu below.

  • Columns


    • Columns can be selected or unselected by clicking to or dragging top Panel Select button. It is set by <Cfg> SelectingCols='1'. The top panel is shown by placing <Panel/> tag in <Head> section.
      All columns can be selected or unselected by clicking to Index Panel SelectAll button. It is set by adding ColSelectAll to <Panel> row, here as <Panel Index="ColSelectAll,ColDeleteAll,ColCopyAll"/>
      Here the SelectAll button is a switch showing if all columns are selected. It is set by <Cfg> SelectAllType='31'.
    • Columns can be resized by mouse dragging its edge in Header row. It is default behavior set in Defaults.xml by <Cfg> ColResizing='1'.
    • Columns can be moved by dragging the Header row. It is default behavior set in Defaults.xml by <Cfg> ColMoving='1'.
      If dragged selected column, all selected columns are moved to the destination.
    • Columns can be copied by dragging the Header row with Ctrl. It is set by <Cfg> ColAdding='1' ColCopying='1'.
      If dragged selected column, all selected columns are copied to the destination.
    • Columns can be copied or added by clicking to left Panel Copy button. It is set by <Cfg> ColAdding='1' ColCopying='1'. The top panel is shown by placing <Panel/> tag in <Head> section.
      The Copy menu permits copying or adding one column, all selected or all focused columns.
      Selected or focused columns can be copied or added also by clicking to toolbar AddCol button.
    • Columns can be deleted or undeleted by clicking to top Panel Delete button. It is set by <Cfg> ColDeleting='1'. The top panel is shown by placing <Panel/> tag in <Head> section.
      Selected columns can be deleted or undeleted by clicking to Header Panel DeleteAll button. It is set by adding ColDeleteAll to <Panel> row, here as <Panel Index="ColSelectAll,ColDeleteAll,ColCopyAll"/>
    • Columns can be hidden or shown from columns menu shown on click to toolbar Columns button.
      In this sample columns can be hidden or shown also by clicking to top Panel Delete button, its Menu contains items also for hiding / showing columns.
      In this sample also any fixed column can be hidden from right click popup menu by custom action, see the Menu below.

  • Menu

    • The right click popup menu is defined by <Cfg> / <C> / <I> / cell

      Menu

      attribute.
      In this sample the Menu is defined for all grid items in <Cfg Menu='...'/>.
      The Menu can contain items for grid standard action or any custom API action. The Menu format can be first character separated array or complex JSON.
      This example uses complex JSON format with submenus to control rows and columns.
    • The menu hides options not available for given row or column by <Cfg> HideMenuUnused='1'.
    • This example defines custom actions for showing and hiding particular fixed rows and columns.
      These custom actions are defined in JavaScript in HTML file. These custom items are also used in the Menu.
    • This example modifies the row and column Panel Delete and DeleteAll button to show popup menu with delete/undelete and hide/show option.
      It is set by <Panel OnClickPanelDelete="ShowMenu OR ShowNoMenu" PanelDeleteMenu="..." OnClickPanelDeleteAll="ShowMenu OR ShowNoMenu" PanelDeleteAllMenu="..."/>

  • Other features


    • Standard number row index shown in new left column named "Index", for all rows except deleted. It is set by <Cfg RowIndex="Index" RowIndexType="6"/>.
      Standard character column index shown in main header, for all columns except deleted. It is set by <Cfg ColIndex="Header" ColIndexType="6" ColIndexChars="ABCDEFGHIJKLMNOPQRSTUVWXYZ"/>
    • Row ids are shown in the right column. Compare them to row Index when rows are moved, deleted or copied. The row id is generated automatically from 1 and with "R" prefix set by <Cfg AutoIdPrefix="R"/>.
      Column names are shown in bottom row. Compare them to column Index when columns are moved, deleted or copied. The column name is generated from "A" in the same way as index.
    • Automatic adding new rows on scroll to bottom and clearing them when not shown. Set by <Cfg Paging="2" AutoPages="1" PageLength="10" MaxPages="3" RemoveUnusedFixed="0" RemoveAutoPages="1"/> <Pager Visible="0"/>
      Automatic adding new columns on scroll to right and clearing them when not shown. Set by <Cfg ColPaging="2" AutoColPages="1" ColPageLength="10" ColPageMin="0" MaxColPages="3" ColPagingFixed="0" RemoveAutoColPages="1"/>
    • Cell range can be focused by mouse dragging. It is set by <Cfg> FocusRect='5'.
      Enter moves cursor down. It is set by <Cfg> EnterMode='1'.
      All actions can be undone, including focus and scroll. It is set by <Cfg> Undo='79'.