5. Cell images and charts

Cell side images, floating images, mark images and mark charts

• Side icons

  
  For more information see Side icons.
  

  • Icons in grid cell

    
    
    • There can be three icon sets in every cell, left side by

      LeftIcons

      , right side by

      RightSide

      and inside cell next to cell text by

      TextIcons

      .
    • Every icon set can contain one or more icons, comma separated. The more icons in one set can be displayed horizontally, vertically or wrapped according to vertical space, set by attribute

      IconWrap

    • The displayed icon can be defined by

      {name}Icon

      , where the {name} is the icon name used in the Left/Right/TextIcons. If not set, the {name} is used as the displayed icon.
    • The icon button can be defined by

      {name}Button

      , where the {name} is the icon name used in the Left/Right/TextIcons. If not set, the {name} is used as the icon button. To the defined button can be assigned event hadlers specific for the icon e.g. OnClickXXX="alert(1)"

  • Icon in toolbar cell

    
    
    • Toolbar cell can have defined only one icon by

      Icon

      attribute. The icon can be displayed on left or right side of the cell, specified by

      IconAlign

      attribute.
    • The icon button can be defined by

      IconButton

      . If not set, the icon name is used as the icon button. To the defined button can be assigned event hadlers specific for the icon e.g. OnClickXXX="alert(1)"
    • By default the toolbar cell has set button as the icon name for the whole cell, to specify button to only the icon set

      Button

      = "".
    • Toolbar cell can display next special popup icon if set

      Popup

      , to show the cell List on click.
    • The toolbar icons can be scalled by

      IconZoom

      , default is 1.25 as 125% zoom.

  • Defining icons

    
    The icons are defined in

    Icons

    root tag. Default FastGrid icons are defined in source file Style.js.
    The icons are defined in special format, as SVG image part, with only <path> tags.
    All the icons should have the same size defined by Cfg

    IconWidth

    /

    IconHeight

    . The icon can be defined bigger or smaller, but the reserved space and the clickable area is still the IconWidth / IconHeight.
    For more information see Defining icons.
    

  • External icons

    
    The {name}Icon in grid cells and Icon in toolbar cells accept also external image files defined as their url or as direct "data:...".
    The relative urls are relative to the main page url, not to FastGrid url.
    Size of the external image can be set by {name}IconHeight in grid cell or IconHeight in toolbar cell. If not set, the image is shown on its original size. The external image is shrunk, if the image default or explicit height is higher than the row height. It does not change the width reserved for the icon by the IconWidth.
    Using external icons can slow down paint! External icons can blink during some actions like resizing.
    External icons should be used only for development; in production they should be converted to internal images in Icons.
    

• Floating images

  
  Floating images are external image files (svg, jpg, ...) displayed outside cells. The image can be also included directly using "data:" protocol in url.
  The images are fully interactive, they can be added (local or remote files), deleted, copied, moved, resized, rotated, cropped, made transparent, have assigned link and tip, controlled by z-index. Both directly by users or by API.
  The floating images can be displayed only on grid rows, not on toolbars.
  Floating images should be used only for interactive images changeable by users. For static images in cells use the Side icons instead, they are much faster.
  The images are stored in root array

  Images

  .
  For more information see Floating images.
  

• Cell inner border

  
  Cell inner border is indepenent on the cell outer border (grid) and is defined by

  CellBorder

  attribute. In toolbar it is the only border the toolbar cell can have.
  Cell inner border is always rectangle, although it can hide some its edges and can have rounded corners.
  By the

  CellBorder

  is possible to specify line color, width, dasharray and background color and defined cell border icon.
  The cell border icon is defined in

  CellBorders

  root tag and can specify the position and size of rectangle, rounded corners, interactivity and the background image.
  The background image in cell border is usually the rectangle, but in fact it can be any background image.
  For more information see CellBorder.
  

• Mark icons

  
  Mark icons are icons displayed in specified cell corner, in specified direction. Or the mark icons can be displayed on whole cell background.
  Mark icons are inactive and do not generate mouse events, except special icons like Chart.
  Mark icons are defined the same as side icons in

  Icons

  , but unlike the side icons the mark icons can have defined their width and height.
  Mark icons can be set to cells in two similar ways, in row attribute

  M

  and in cell attribute

  Marks

  . Both ways can be used together in one cell.
  Mark icon can be set with parameters in (), the parameters depends on the mark icon definition, every icon can have different parameters. In the () is possible also to use JavaScript code to calculate the parameter value.
  For more information see Mark icons.
  There is special mark icon

  Chart()

  , this icon is used to generate bar and line chart in cells. See Chart.