Skip to content

Commit f94e4f8

Browse files
kb(grid): scroll to selected row (#488)
* kb(grid): scroll to selected row * Update knowledge-base/grid-scroll-to-selected-row.md * Update knowledge-base/grid-scroll-to-selected-row.md * Update knowledge-base/grid-scroll-to-selected-row.md * Update knowledge-base/grid-scroll-to-selected-row.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent e823326 commit f94e4f8

File tree

1 file changed

+32
-0
lines changed

1 file changed

+32
-0
lines changed
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: Scroll to Selected Grid Row
3+
description: How to scroll a grid to the selected table row
4+
type: how-to
5+
page_title: Scroll to Selected Grid item
6+
slug: grid-kb-scroll-to-selected-row
7+
position:
8+
tags:
9+
ticketid: 1513767
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Grid for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
I would like to pre-select a row when the page is loaded, and I would like to show the grid with that row scrolled to the top, or sorted to appear on top.
26+
27+
## Solution
28+
You can find a selected row in the grid markup by the `k-state-selected` CSS class it has, and use a bit of JavaScript to scroll to it - browsers provide the `scrollIntoView()` method for that.
29+
30+
With **row virtualization**, however, the selected row may not be rendered. That is why you need to find its position and scroll to it through the `Skip` parameter of the Grid.
31+
32+
You can find examples in the following sample project: https://github.com/telerik/blazor-ui/tree/master/grid/scroll-to-selected-row

0 commit comments

Comments
 (0)