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

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: ProductColor:Product Color

3. In the column where you want the image and text displayed on the same cell, you will need to set the control name of column heading as follows.

<controlname>:<grid control name>.ColumnsArea:template=TextImageCell:cellinfo=<column control name where you want to extract the data from>:<column text>

For example:

ProductDescription:GridP.ColumnsArea:template=TextImageCell:cellinfo=GridPProductColor:Product Color

Note: download the TextImageCell template attached in this article.




    • Related Articles

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

    • Text Search

      CM evolveIT Text Search This document will cover the basics of the CM evolveIT Dashboard Text Search. After completing this document, you should have a basic understanding of the CM evolveIT Dashboard Text Search 1. What is Text Search for? This ...

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

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

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