How to use CSS styles on an interpolated string?

Posted by: mark.david on 28 November 2022, 4:14 am EST

    • Post Options:
    • Link

    Posted 28 November 2022, 4:14 am EST

    I have an interpolated string, and I want it to have a trailing ellipses should text overflow, and a tooltip upon hover displaying the full text.

    Reference code:

    <wj-flex-grid-column [header]="''" [binding]="'label'" [isReadOnly]="true" [width]="'*'">
         <ng-template wjFlexGridCellTemplate class="labelOverflow">

    The CSS class definition:

    .labelOverflow {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    .labelOverflow:hover {
      text-overflow: clip;
      white-space: normal;
      word-break: break-all;
  • Posted 28 November 2022, 10:39 pm EST


    This query has been answered on our other portal, here is the copy of the response -

    You can handle the ‘formatItem’ event of the flexGrid to add a custom tooltip to the cells where text is overflowed. Also, you can use our ‘ToolTip’ control to show and hide the tooltip as per your requirements.

    Please refer to the following sample for it’s implementation -


Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels