From 83becb7e6d0f70cb7e873bcaea881bd555e023b5 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Sun, 12 Sep 2021 13:28:21 +0300 Subject: [PATCH 1/5] kb(grid): scroll to selected row --- knowledge-base/grid-scroll-to-selected-row.md | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 knowledge-base/grid-scroll-to-selected-row.md diff --git a/knowledge-base/grid-scroll-to-selected-row.md b/knowledge-base/grid-scroll-to-selected-row.md new file mode 100644 index 0000000000..bbb1688a9f --- /dev/null +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -0,0 +1,30 @@ +--- +title: Scroll to selected row +description: How to scroll a grid to the selected row +type: how-to +page_title: Scroll to selected row +slug: grid-kb-scroll-to-selected-row +position: +tags: +ticketid: 1513767 +res_type: kb +--- + +## Environment + + + + + + + +
ProductGrid for Blazor
+ + +## Description +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. + +## Solution +You can get find a selected row in the grid markup by the `k-state-selected` class it has, and use a bit of JS to scroll to it - browsers provide the `scrollIntoView()` method for that. WIth virtualization you would have to find the position of that row and scroll to it through the `Skip` parameter of the grid, however, because it may not be rendered. + +You can find examples in the following sample project: https://github.com/telerik/blazor-ui/tree/master/grid/scroll-to-selected-row From 1ffb302635249842d304300156a35f25d6249668 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 13 Sep 2021 17:49:55 +0300 Subject: [PATCH 2/5] Update knowledge-base/grid-scroll-to-selected-row.md --- knowledge-base/grid-scroll-to-selected-row.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-scroll-to-selected-row.md b/knowledge-base/grid-scroll-to-selected-row.md index bbb1688a9f..f97edebc7c 100644 --- a/knowledge-base/grid-scroll-to-selected-row.md +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -1,6 +1,6 @@ --- title: Scroll to selected row -description: How to scroll a grid to the selected row +description: How to scroll a grid to the selected table row type: how-to page_title: Scroll to selected row slug: grid-kb-scroll-to-selected-row From c2c181eda320e2687e996af02ab73ac5403e104d Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 13 Sep 2021 17:50:04 +0300 Subject: [PATCH 3/5] Update knowledge-base/grid-scroll-to-selected-row.md --- knowledge-base/grid-scroll-to-selected-row.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/knowledge-base/grid-scroll-to-selected-row.md b/knowledge-base/grid-scroll-to-selected-row.md index f97edebc7c..3f146408ae 100644 --- a/knowledge-base/grid-scroll-to-selected-row.md +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -25,6 +25,8 @@ res_type: kb 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. ## Solution -You can get find a selected row in the grid markup by the `k-state-selected` class it has, and use a bit of JS to scroll to it - browsers provide the `scrollIntoView()` method for that. WIth virtualization you would have to find the position of that row and scroll to it through the `Skip` parameter of the grid, however, because it may not be rendered. +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. + +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. You can find examples in the following sample project: https://github.com/telerik/blazor-ui/tree/master/grid/scroll-to-selected-row From e253fb32c70125a5e19aaf168ff9c7db202d6bcf Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 13 Sep 2021 17:50:51 +0300 Subject: [PATCH 4/5] Update knowledge-base/grid-scroll-to-selected-row.md --- knowledge-base/grid-scroll-to-selected-row.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-scroll-to-selected-row.md b/knowledge-base/grid-scroll-to-selected-row.md index 3f146408ae..320e0c984c 100644 --- a/knowledge-base/grid-scroll-to-selected-row.md +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -1,5 +1,5 @@ --- -title: Scroll to selected row +title: Scroll to Selected Grid Row description: How to scroll a grid to the selected table row type: how-to page_title: Scroll to selected row From 2bfe0f378039945bd921b277b78a1730669cf9b7 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 13 Sep 2021 17:51:14 +0300 Subject: [PATCH 5/5] Update knowledge-base/grid-scroll-to-selected-row.md --- knowledge-base/grid-scroll-to-selected-row.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-scroll-to-selected-row.md b/knowledge-base/grid-scroll-to-selected-row.md index 320e0c984c..33be7adbb6 100644 --- a/knowledge-base/grid-scroll-to-selected-row.md +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -2,7 +2,7 @@ title: Scroll to Selected Grid Row description: How to scroll a grid to the selected table row type: how-to -page_title: Scroll to selected row +page_title: Scroll to Selected Grid item slug: grid-kb-scroll-to-selected-row position: tags: