How to Display an Image in a Grid Cell

How to Display an Image in a Grid Cell

1. Set the control name of the grid.


2. On the column name where you want to display the image, set the Text Property of the column heading as follows.

<control name>:<grid control name>.ColumnsArea:template=WebImageGrid:<column heading text>

Example:
ProductImage:GridP.ColumnsArea:template=WebImageGrid:Product Image





Note: The value of the field must be the path of the image that must exist in the images folder of your web project.

    • Related Articles

    • How to Display an Image and Text in the Same Grid Cell

      1. Set the control name of the grid. 2. For the column where you need the information from, you will need to set the column to visible but set the width to 0 and set the control name of the column. <controlname>:<column text> For example: ...

    • How to Implement Rich Tooltip to a Grid Field

      Rich tooltip on a grid feature enables the user to see tooltips with images and formatted text on a grid cell upon hovering. This feature also enables the developer to specify the delay time after hovering before it displays the tooltip message. The ...

    • How to Implement Image Gallery

      In this article, we will be showing an example how we can use other Javascript library other than Dojo Toolkit in WebClient and how to implement an image gallery using https://galleriajs.github.io/ 1. Create a Plex grid function where one of the grid ...

    • Filtered Grid

      This feature has been implemented for the Edit Grid only which currently only supports text fields. To implement, define the following inheritance: MyEntity ENT is ENT Ability.FilterList With this, you will inherit a non-implementable view ...

    • Edit Grid

      Edit Grid can be found in the current version of HSync templates. To implement add the triple: MyEntity ENT is a ENT Ability.EditList By default all fields are editable. To prevent a field from being edited, add it to the local variable 'NonEditable' ...