How to Implement Rich Tooltip to a Grid Field

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 information of the tooltip has to be available on the grid. To display a rich tooltip on a column grid, you will need to configure the grid and the grid column with the following steps.

1. Set the control name of the grid.


2. Set the control name of each column in the grid.

  • Setting the control name of the grid column is done in the cell column heading text. For a cell that does not have a tooltip, the control name is set like as follows.

<controlname>:<column text>

For example:

ProductDescription:Product Description

  • For a column that you want to show a tooltip, the control name of the cell is set like as follows. The tooltip message will be displayed on a every row of the column.

<controlname>:tooltipfields=<grid cell control name where you extract the information from separated by comma with prefix from the grid control name>:showdelay=<in millisecond>:<column text>

For example:

ProductName:tooltipfields=GridPProductCode,GridPProductDescription,GridPProductImage:showdelay=500:Product Name




    • Related Articles

    • How to Implement Rich Tooltip to an Edit Field

      Rich tooltip feature enables the user to see tooltips with images and formatted text on an edit field. This feature also enables the developer to specify the delay time after hovering before it displays the tooltip message. The information of 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 ...

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

    • Field Customization

      To implement field customization we need to make our field(s) inherit from Field Plex For this example will use the Customer entity. We will add a password field OrderProcessing.Customer has FLD AppPassword. After adding the field, define what type ...

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