From 8b819678c321f4a6167beb5efa1a5b030bb0b4b5 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 3 Jan 2025 14:37:40 +0200
Subject: [PATCH] kb(grid): Add KB for focusable elements inside a navigable
Grid template
---
...-cannot-open-dropdown-in-navigable-grid.md | 127 ++++++++++++++++++
1 file changed, 127 insertions(+)
create mode 100644 knowledge-base/grid-cannot-open-dropdown-in-navigable-grid.md
diff --git a/knowledge-base/grid-cannot-open-dropdown-in-navigable-grid.md b/knowledge-base/grid-cannot-open-dropdown-in-navigable-grid.md
new file mode 100644
index 0000000000..2ab628942a
--- /dev/null
+++ b/knowledge-base/grid-cannot-open-dropdown-in-navigable-grid.md
@@ -0,0 +1,127 @@
+---
+title: Cannot Open a DropDownList inside a Navigable Grid
+description: Learn how to troubleshoot the inability to focus or open a Button, DropDownList, ComboBox, or other components inside a navigable Telerik Grid for Blazor.
+type: troubleshooting
+page_title: Cannot Open a DropDownList inside a Navigable Grid
+slug: grid-kb-cannot-open-dropdown-in-navigable-grid
+tags: telerik, blazor, grid, treelist
+ticketid: 1623773
+res_type: kb
+---
+
+## Environment
+
+
+
+
+
Product
+
+ Grid for Blazor,
+ TreeList for Blazor
+
+
+
+
+
+## Description
+
+Dropdown components do not open inside a Grid column `` when the Grid has [`Navigable="true"`](https://demos.telerik.com/blazor-ui/grid/keyboard-navigation).
+
+## Cause
+
+When the Grid keyboard navigation is enabled, the table cells automatically gain focus when a cell is clicked. If the cell contains a focusable element, this element may lose focus unexpectedly on click.
+
+## Solution
+
+Normally, editor components belong to [``]({%slug grid-templates-editor%})s, but this article assumes that editor templates are not an option. Thus, other possible options include:
+
+* If data operations like sorting and filtering are not necessary for the affected columns, place buttons or dropdown components like ComboBox or DropDownList inside a [Grid Command Column]({%slug components/grid/columns/command%}) instead. Grid command columns do not gain focus automatically when a nested focusable element is clicked.
+* If data operations for the affected columns are required, then use a container with `@onclick:stopPropagation` inside the `` template. This will prevent the Grid from knowing about the clicks, so the data cell will not gain focus automatically.
+
+>caption Using dropdowns, buttons and other focusable elements inside a navigable Grid
+
+```RAZOR
+
+
+
+
+ @{ var dataItem = (Product)context; }
+
+ @dataItem.Name
+
+
+
+
+
+
+ @{ var dataItem = (Product)context; }
+
+ @dataItem.Name
+
+
+
+
+
+ @{ var dataItem = (Product)context; }
+
+ @dataItem.Name
+
+
+
+
+
+
+
+
+@code {
+ List GridData { get; set; } = new();
+
+ List DropDownListData { get; set; } = new List() { true, false };
+
+ private void OnButtonClick(int id)
+ {
+ Console.WriteLine($"Button click on data item {id}");
+ }
+
+ protected override void OnInitialized()
+ {
+ for (int i = 1; i <= 3; i++)
+ {
+ GridData.Add(new Product()
+ {
+ Id = i,
+ Name = $"Name {i}",
+ Active = i % 3 == 0
+ });
+ }
+ }
+
+ public class Product
+ {
+ public int Id { get; set; }
+ public string Name { get; set; } = string.Empty;
+ public bool Active { get; set; }
+ }
+}
+```
+
+## See Also
+
+* [Grid Keyboard Navigation Demo](https://demos.telerik.com/blazor-ui/grid/keyboard-navigation)
+* [Grid Column Template]({%slug grid-templates-column%})
+* [Grid Command Column]({%slug components/grid/columns/command%})