From 6346bad3efe9a0479e3424bfc84a75c6f0994902 Mon Sep 17 00:00:00 2001
From: KB Bot <kb-bot@telerik.com>
Date: Wed, 16 Jul 2025 08:06:22 +0000
Subject: [PATCH 1/2] Added new kb article
 grid-prevent-rowclick-when-selecting-text

---
 ...id-prevent-rowclick-when-selecting-text.md | 103 ++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 knowledge-base/grid-prevent-rowclick-when-selecting-text.md

diff --git a/knowledge-base/grid-prevent-rowclick-when-selecting-text.md b/knowledge-base/grid-prevent-rowclick-when-selecting-text.md
new file mode 100644
index 000000000..1e922c170
--- /dev/null
+++ b/knowledge-base/grid-prevent-rowclick-when-selecting-text.md
@@ -0,0 +1,103 @@
+---
+title: Prevent RowClick Event When Selecting Text in Grid for Blazor
+description: Learn how to prevent the RowClick event from being triggered in Grid for Blazor when selecting text using JavaScript interop.
+type: how-to
+page_title: Avoid RowClick Event Trigger During Text Selection in Grid for Blazor
+meta_title: Avoid RowClick Event Trigger During Text Selection in Grid for Blazor
+slug: grid-kb-prevent-rowclick-when-selecting-text
+tags: grid, blazor, rowclick, text-selection
+res_type: kb
+ticketid: 1692651
+---
+
+## Environment
+<table>
+<tbody>
+<tr>
+<td> Product </td>
+<td> Grid for Blazor </td>
+</tr>
+</tbody>
+</table>
+
+## Description
+
+I want to prevent the [OnRowClick](slug:grid-events#onrowclick) event in the [Grid for Blazor](slug:grid-overview) from executing when a user selects text by dragging to highlight it. 
+
+This knowledge base article also answers the following questions:
+- How to prevent row click event in a Blazor Grid during text selection?
+- How to check for text selection before firing Grid events?
+- How to use JavaScript interop for handling the `OnRowClick` event in Telerik Blazor Grid?
+
+## Solution
+
+To achieve this, use JavaScript interop to detect text selection. Follow these steps:
+
+1. Define a JavaScript helper function that checks whether any text is currently selected on the page.
+2. Inject the IJSRuntime service into your Blazor component to enable JavaScript interop.
+3. Call the JavaScript function within your `OnRowClick` event handler to bypass logic when text is selected conditionally.
+
+Example implementation:
+
+````RAZOR
+@inject IJSRuntime JS
+
+<h3>Grid with Safe Row Click Handling</h3>
+
+@if (!string.IsNullOrEmpty(ClickedPersonName))
+{
+    <p><strong>Last clicked person:</strong> @ClickedPersonName</p>
+}
+
+<TelerikGrid Data="@People"
+             OnRowClick="@OnRowClickHandler"
+             Height="300px">
+    <GridColumns>
+        <GridColumn Field="Id" Title="ID" />
+        <GridColumn Field="Name" Title="Name" />
+        <GridColumn Field="Email" Title="Email" />
+    </GridColumns>
+</TelerikGrid>
+
+@code {
+    public class Person
+    {
+        public int Id { get; set; }
+        public string Name { get; set; } = string.Empty;
+        public string Email { get; set; } = string.Empty;
+    }
+
+    private readonly List<Person> People = new()
+    {
+        new Person { Id = 1, Name = "Alice Johnson", Email = "alice@example.com" },
+        new Person { Id = 2, Name = "Bob Smith", Email = "bob@example.com" },
+        new Person { Id = 3, Name = "Carol Lee", Email = "carol@example.com" }
+    };
+
+    private string ClickedPersonName = "";
+
+    private async Task OnRowClickHandler(GridRowClickEventArgs args)
+    {
+        var isTextSelected = await JS.InvokeAsync<bool>("isTextSelected");
+        if (isTextSelected)
+        {
+            ClickedPersonName = "Text was selected, row click ignored.";
+            return;
+        }
+
+        var item = (Person)args.Item;
+        ClickedPersonName = item.Name;
+    }
+}
+
+@* Inline JavaScript for detecting text selection *@
+<script>
+    window.isTextSelected = function () {
+        return window.getSelection().toString().length > 0;
+    };
+</script>
+````
+
+## See Also
+
+* [Grid Events Documentation](slug:grid-events#onrowclick)

From aa62427679f2940f435c522a1a858a80b2888ee7 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Wed, 16 Jul 2025 11:15:41 +0300
Subject: [PATCH 2/2] chore: polish article

---
 knowledge-base/grid-prevent-rowclick-when-selecting-text.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/knowledge-base/grid-prevent-rowclick-when-selecting-text.md b/knowledge-base/grid-prevent-rowclick-when-selecting-text.md
index 1e922c170..25e76d3cc 100644
--- a/knowledge-base/grid-prevent-rowclick-when-selecting-text.md
+++ b/knowledge-base/grid-prevent-rowclick-when-selecting-text.md
@@ -37,8 +37,6 @@ To achieve this, use JavaScript interop to detect text selection. Follow these s
 2. Inject the IJSRuntime service into your Blazor component to enable JavaScript interop.
 3. Call the JavaScript function within your `OnRowClick` event handler to bypass logic when text is selected conditionally.
 
-Example implementation:
-
 ````RAZOR
 @inject IJSRuntime JS
 
@@ -100,4 +98,4 @@ Example implementation:
 
 ## See Also
 
-* [Grid Events Documentation](slug:grid-events#onrowclick)
+* [Grid OnRowClick event](slug:grid-events#onrowclick)