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

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. HTML, Links, Images and Buttons

Any HTML content, hyperlinks, images, cell action buttons

Source: 03-HTML.xml
  • Showing

    hyperlink

    in cell can be done in many ways.
    • The simplest is attribute

      Link

      attaching the link for any cell type and value. You can define target window for the link by LinkTarget attribute. If the cell is editable, the value (but not the link url) can be still edited by clicking in cell outside the link or pressing Enter or F2. The Link attribute does not support catching onclick to the link.
    • More complex is

      Link

      Type. Both the link url and link text (and also link target) are defined in cell value, as the first character separated list as '|href|text|target'. For example Col1='|http://www.treegrid.com|TreeGrid web|_blank' To let users to follow the link, set CanEdit='0'. To let users to edit the link text and url set CanEdit='1' and specify what will be edited by EditFormat. You can catch the link click by XML event OnClickLink or by API event OnLinkClick. The Link type supports adding prefixes to text and or to url by Format attribute.
    • The link can be defined also by standard HTML <a> tag included in Html type cell or in HtmlPrefix attribute.
      Or it can be simulated in API or XML event OnClick by JavaScript window.open method.
  • Showing

    image

    in cell can be done in many ways.
    • The simplest is

      Icon

      type, it shows in cell only one inactive image defined by the cell value. It produces the smallest HTML code. The icon can be aligned by Align attribute to left, right or center.
    • More complex is

      Img

      type, it shows in cell one image, supports resizing and cropping the image and also hyperlink. The image source, size and link is defined in cell value, as the first character separated list as '|src|width|height|left|top|link'. For example Col1='|Green.svg|20|20|10|6|http://www.treegrid.com'. If set only width and height, it will be resized to them, if set all four extents, it shows the cut off rectangle from the original image.
      You can catch the link click by XML event OnClickLink or by API event OnLinkClick. The Img type supports adding prefixes to source, text and to url by Format attribute. The Img type can be also editable and permits editing all the source parts, what is edited is defined by EditFormat.
    • Side icons

      . In every cell is possible to show side icons along with the cell value, defined by Icon a Button attributes.
      • The attribute

        Button

        shows right side icon or button or custom HTML code. All buttons in one column have the same width defined by column's WidthPad attribute.
        The click to the Button can be caught by API event OnButtonClick or by XML event OnClickSide or OnClickSideButton.
      • The attribute

        Icon

        shows left or right side icon. So the cell can have maximally two right side icons or one left and one right.
        The icon position is defined by IconAlign attribute. In one column every Icon can have different width set by IconWidth attribute. The Icon cannot show any HTML code or <button>.
        The click to the Icon can be caught by API event OnIconClick or by XML event OnClickSide or OnClickSideIcon.
    • The image can be defined also by standard HTML <img> tag or by tag with defined CSS background-image, included in Html type cell or in HtmlPrefix / HtmlPostfix attribute.
  • Panel

    type shows more clickable icons or buttons in one cell. Every icon or button can have defined its own width, onclick, tooltip and mouse cursor.
    For TreeGrid standard row icons (Move,Select,Delete,Copy) is shown fast panel, with all icons in one image.
    For custom icons is shown every icon in separate tag. The custom panel buttons are defined in list in the cell value or column Buttons attribute.
    For example: Col1='But' Col1But='Green.svg' Col1ButWidth='20' Col1OnClickPanelBut='alert("clicked")' Col1PanelButTip='tooltip for but' Col1PanelButCursor='crosshair'.
  • Abs

    type shows independent, absolutely positioned HTML tags inside one cell.
    All the tags are defined in the cell value, in the first character separated list as |x|y|width|height|html|cls|reserved|reserved|x|y|width|height|html|cls|reserved|reserved|x|...
  • File

    type permits users to select local file from disk and display it in the cell and / or upload it to server. It does not work in IE 9 and older!
    The files are uploaded like standard <input type="file"> values under name/key "row_id$col_name". If more files are uploaded for one cell, the next files have names "row_id$col_name$index", with index starting 1.
    Format attribute specifies how the file will be shown in the cell, e.g. as its name or as thumbnail or as image. It can be set also dynamically by OnGetFormat API event.
    It is possible to select more files to one cell by setting Range='1'.
    To control which files can be selected use Accept attribute as media type and / or OnSetFile API event to restrict actually selected files.