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

1. Client root paging

Automatic paging of root rows on client side

Source: 01-Client root paging.xml
  • Client root paging distributes all root rows into root pages.
    Client root paging has no effect on child rows in tree. Client root paging is automatically done by TreeGrid and does not require any work on server.
    The client root paging is controlled by Cfg attribute

    Paging

    , values 1 or 2 and

    AllPages

    , values 0 or 1:
    • Pages rendered on demand, set by Paging='2'.
      The pages are rendered only if they are scrolled to view for given time. The time is set PageTime attribute, default is 200 ms.
      It can be used for grids with rows about 500 ~ 20,000.
    • All pages are rendered on start, set by Paging='1'.
      The advantage to no paging setting (Paging='0') is the pages are rendered on background and a user can cancel the rendering and switch to Paging='2'. Also it supports pagers for better navigation.
      It can be used for grids with rows about 500 ~ 2,000.
    • Only one page is shown at a time, set by AllPages='0' and Paging='2'. It is standard paging widely used on internet, the page can be switched only from pager, not by scrollbar.
      It can be used for grids with rows about 500 ~ 20,000.
  • The pages are created on grid loading and also re-created after any sorting, filtering or grouping.
    The size of page is set by Cfg attribute

    PageLength

    . It is specifies count of root row at one page when creating pages. The count can differ, when some row is added or deleted and at the last page.
  • When there are too many pages rendered, the grid slows down. To solve this problem the unused pages are cleared after some time.
    Cfg attribute MaxPages specifies how many pages can be rendered in grid at one time. If the count of rendered pages exceeds this limit, the oldest (not shown) pages are cleared.
  • TreeGrid provides three built in pagers:

    • Right side pager


      The pager is defined by special root tag <Pager>.
      This pager is shown on grid right side and shows page names according to the actual sorting. If there is no active sorting in grid, it shows captions Page 1 - Page XX.
      The page name is built from the first and last row in the page, from cell values in sorting columns. The cell values are abbreviated on position they differ from values in the last row in previous page and the first row on next page.
      It is possible to specify the cell value used in pager name instead of actual value by attribute PageNameValue.
      The right side pager has similar attribute to the standard column and can be also resized or hidden.

    • Pager with navigation buttons


      It is Space cell of Type='Pager'. It shows standard buttons First, Prev, Next, Last and cell to edit page number.
      It creates new Space cells named PagerFirst, PagerPrev, PagerEdit, PagerNext, PagerLast, in that order. It is also possible to set attributes for these cells like PagerEditWidth='70'.
      This pager can be displayed in any space row, e.g. on Toolbar.

    • List of page links


      It is Space cell of Type='Pages'. It shows all pages as numbers with links to show the page.
      It can show all the page links, optionally with horizontal scrollbar, depending also on Wrap attribute.
      Or it can show only nearest pages to actual page (set by Count attribute) and optionally the rest pages in steps set by Step attribute.
      The display of the page links (the numbers) can be changed by API by OnGetPageNumber event.
      This pager can be displayed in any space row, e.g. on Toolbar, usually with RelWidth='1' to accommodate as much space as possible.

    • Custom pagers


      There are also various API methods for paging to let developers to build their custom pager.
      Especially GoToPage, GoToNextPage and GoToPreviousPage methods. For more information see Paging documentation.