How to use CSS styles on an interpolated string?

How to use CSS styles on an interpolated string?

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

• 

  mark.david

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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">
            {{item.label}}
       </ng-template>
  </wj-flex-grid-column>

  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;
  }

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 28 November 2022, 10:39 pm EST

  Hi,

  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 - https://stackblitz.com/edit/angular-radctv?file=src/app/app.component.ts

  Regards