Enabling Text Selection and Page Redirects for Grid Cells
Environment
| Product | Kendo UI Grid for Angular |
Description
I am utilizing the Kendo UI for Angular Grid and need to implement a feature that redirects the user to a specific page upon clicking on a cell. However, I also want to allow the user to select the text from the cell using a double-click without triggering the navigation. The issue is that double-clicking a cell triggers both the cell click event (for navigation) and the text selection, which results in an unwanted redirect.
This knowledge base article also answers the following questions:
- How can I enable text selection in Kendo UI for Angular Grid cells on double click?
- How do I navigate to a different page on single cell click in Kendo UI for Angular Grid without affecting text selection?
- Is it possible to differentiate between single and double clicks in Kendo UI for Angular Grid cells for different actions?
Solution
When double clicking a cell, the cellClick event is triggered first and this is expected behaviour. This makes it difficult to differentiate when you want to select a text using double click or navigate to a page using single click.
To achieve the desired functionality of allowing text selection on a double click and navigation on a single click, follow these steps:
-
Render the cell content within a
<span>element using theCellTemplateDirectiveto allow precise event target identification.html<ng-template kendoGridCellTemplate let-dataItem> <span>{{dataItem.ProductName}}</span> </ng-template> -
Modify the cell click event handler to differentiate between click targets. If the event's target is not the
<span>element (meaning it's a single click elsewhere in the row for navigation), proceed with the navigation. Otherwise, if the target is the<span>(indicating a double click intended for text selection), do not trigger navigation.tspublic cellClickHandler(e: CellClickEvent) { let clickTarget = e.originalEvent.target; if (e.type === 'click' && clickTarget.tagName !== 'SPAN') { window.location.href = 'https://www.telerik.com/kendo-angular-ui/components/'; } }
The following example demonstrates how to deal with cellClick and dblclick events when you need to support page navigation and text selection for cells.