3. HTML, Links, Images and Buttons

Any HTML content, hyperlinks, images, cell action buttons

• 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.