Copying text from a kendo grid cell when it has scrollbar

[rk]

Hi,

If any of the kendo grid cell has overflowing content (horizontal or vertical scroll), I want to have that text copied to a clipboard by showing a 'copy to clipboard' icon on that specific cell,  when mouse is hovered over that data cell.

When trying to achieve this, I call a (mouseover) event and check if the element hovered on has overflow. If it does, I set a variable 'hasOverflow' to true and use this to conditionally show the icon. 

But the problem is I don't have access to specific cell, because kendo automatically renders them for us.

 

<div *ngFor column of columns>

    <ng-template kendoGridCellTemplate let-dataItem let-column="column">

         <div (mouseover) = setCellOverflow($event)><pre>{{dataItem[column.field]}}</pre></div>

         <i *ngIf= "hasOverflow">icon</i>             

    </ng-template>

</div>

Script::         

         setCellOverflow(event) {

             if(event.scrollHeight < event.clientHeight)  hasOverflow = true;       //instead of setting hasOverflow for every cell, want to set it for specific cell

         }

 

 

[Dimiter Topalov]

Hello Ramakrishna,

The desired functionality is not supported out-of-the-box and as such should be a subject to a custom implementation. The Grid is essentially no different from a regular HTML table element whose rows are rendered via a *ngFor directive.

The *ngIf directive is not very suitable for the desired functionality as there is no way to specify which cell the boolen property the *ngIf applies to should be applied to and which - not.

You can utilize the mouseenter and mouseleave events over the PRE tag (which is the one with scrollable content, not the DIV) and check whether their target (not the events themselves) has a scrollWidth that is greater than its clientWidth. Then you can use class binding to conditionally add and remove a custom class to the PRE element and/or the icon's container. You can then use a combination of this custom class in combination with the :hover pseudo selector to show the icon only for the cell that is being currently hovered.

On a side note, clipping Grid cell content with ellipsis (as opposed to allowing cell content to overflow with scrolling) seems a more straight-forward approach as the default HTML behavior is to copy the whole cell content (even though it is cut with ellipsis), e.g.:

https://plnkr.co/edit/KBTepVb1JXxxagVCQtzB?p=preview

https://www.screencast.com/t/IbzmEYgby

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik