From fcdb3ae05000f9fc5a19fc83d8bf196c7c01d558 Mon Sep 17 00:00:00 2001 From: NansiYancheva Date: Fri, 1 Nov 2024 16:37:54 +0200 Subject: [PATCH 1/9] docs(Grid): Add KB for programmatically row selection and scroll to row --- knowledge-base/grid-scroll-to-selected-row.md | 263 +++++++++++++++++- 1 file changed, 259 insertions(+), 4 deletions(-) diff --git a/knowledge-base/grid-scroll-to-selected-row.md b/knowledge-base/grid-scroll-to-selected-row.md index d4d4f98813..82da49574d 100644 --- a/knowledge-base/grid-scroll-to-selected-row.md +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -22,11 +22,266 @@ res_type: kb ## 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. + +I want to [select a row in Grid]({%slug grid-selection-row%}) programmatically based on some program logic and conditions. I want after that to scroll the Grid to the selected row so the user can see the selected row. ## Solution -You can find a selected row in the grid markup by the `k-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. +The solution to select programatically a row in Grid and scroll to that selected row, depends on the Grid configuration. + +### Grid with **[paging feature]({%slug components/grid/features/paging%})** + +1. Ensure the Grid is on the same page as the selected row. +1. Invoke a JavaScript to make the browser scroll to the selected row into view. The browsers provide the `scrollIntoView()` method that does the scrolling. You can find a selected row in the grid markup by the `k-selected` CSS class it has. + +### Grid with **[virtualization feature]({%slug components/grid/virtual-scrolling%})** + +1. Use the [Grid state]({%slug grid-state%}). +1. Set the [`Skip` parameter]({%slug grid-state%}#information-in-the-grid-state) to the index of the item in the current data collection. + +## Example + +The example below offers comments in the code on some possible improvements. + +>caption Select a Row in Grid Programmatically and Scroll to the Row + +````CSHTML +@using Telerik.DataSource +@using Telerik.DataSource.Extensions +@inject IJSRuntime JsInterop + + +@* Move JavaScript code to a separate JS file in production *@ + + + + +
+

Grid with Paging

+ + + + + + + + + + +
+

Grid with Virtualization

+ + + + + + + + + + + +@code { + #region Parameters + + private TelerikGrid? GridRef { get; set; } + + private List GridData { get; set; } = new(); + private List Employees { get; set; } = new(); + + private IEnumerable SelectedItemsInPageMode { get; set; } = Enumerable.Empty(); + private IEnumerable SelectedItemsInVirtualization { get; set; } = Enumerable.Empty(); + + private string SelectedEmployeeInPageMode { get; set; } = string.Empty; + private string SelectedEmployeeInVirtualization { get; set; } = string.Empty; + + private int PageInPageMode { get; set; } = 1; + private int PageSizeInPageMode { get; set; } = 30; + private int PageSizeInVirtualization { get; set; } = 20; + + private int GridDataCount { get; set; } + private int AllDataCount { get; set; } + + #endregion Parameters + + #region Event Handlers + + private async Task ValueChangedInPageMode(string newValue) + { + SelectedEmployeeInPageMode = newValue; + + if (!string.IsNullOrEmpty(SelectedEmployeeInPageMode)) + { + SelectedItemsInPageMode = GridData.Where(item => item.Name == SelectedEmployeeInPageMode).ToList(); + + //Find and set the page where is the selected item + int itemIndex = GridData.IndexOf(SelectedItemsInPageMode.First()); + PageInPageMode = (int)Math.Ceiling((double)(itemIndex + 1) / PageSizeInPageMode); + + await Task.Delay(20);//Simulate network delay so the page can be set and render in the browser + + await JsInterop.InvokeVoidAsync("scrollToSelectedRow"); + } + else + { + SelectedItemsInPageMode = new List(); + await Task.Delay(20);//Simulate network delay + await JsInterop.InvokeVoidAsync("scrollToFirstRow"); + } + } + + private async Task ValueChangedInVirtualization(string newValue) + { + SelectedEmployeeInVirtualization = newValue; + + int targetItemIndex; + + if (!string.IsNullOrEmpty(SelectedEmployeeInVirtualization)) + { + SelectedItemsInVirtualization = GridData.Where(item => item.Name == SelectedEmployeeInVirtualization).ToList(); + targetItemIndex = GridData.IndexOf(SelectedItemsInVirtualization.First()); + } + else + { + SelectedItemsInVirtualization = new List(); + targetItemIndex = GridData.IndexOf(GridData.First()); + } + await SetSkip(targetItemIndex, SelectedItemsInVirtualization); + } + + #endregion Event Handlers + + #region Methods + + private async Task SetSkip(int skip) + { + await SetSkip(skip, null); + } + + private async Task SetSkip(int skip, IEnumerable itemsToSelect) + { + if (GridRef != null) + { + var state = GridRef.GetState(); + if (itemsToSelect != null) + { + state.SelectedItems = (ICollection)itemsToSelect; + } + state.Skip = ValidateSkip(skip); + await GridRef.SetStateAsync(state); + } + } + + private int ValidateSkip(int desiredSkip) + { + if (desiredSkip < 0) return 0; + int itemsThatFitPerPage = 7; + bool isInvalidSkip = GridDataCount < itemsThatFitPerPage; + return isInvalidSkip ? AllDataCount - itemsThatFitPerPage : desiredSkip; + } + + #endregion Methods + + #region Life Cycle Methods + + protected override async Task OnInitializedAsync() + { + GridData = GenerateData(); + Employees = GridData.Select(e => e.Name).ToList(); + } + + #endregion Life Cycle Methods + + #region Data Generation + + protected async Task ReadItems(GridReadEventArgs args) + { + var datasourceResult = GridData.ToDataSourceResult(args.Request); + var data = ((IEnumerable)datasourceResult.Data).ToList(); + args.Data = data; + args.Total = AllDataCount = datasourceResult.Total; + GridDataCount = data.Count; + + //See more about why this is done here https://docs.telerik.com/blazor-ui/knowledge-base/grid-large-skip-breaks-virtualization + int allowedSkip = ValidateSkip(args.Request.Skip); + if (allowedSkip != args.Request.Skip) + { + await SetSkip(allowedSkip); + } + } + + private List GenerateData() + { + List data = new List(); + for (int i = 1; i <= 100; i++) + { + data.Add(new Employee() + { + EmployeeId = i, + Name = "Employee " + i.ToString(), + Team = "Team " + i % 3 + }); + } + return data; + } + + #endregion Data Generation + + #region Models + + public class Employee + { + public int EmployeeId { get; set; } + public string Name { get; set; } + public string Team { get; set; } + } + + #endregion Models +} +```` -You can find examples in the following sample project: https://github.com/telerik/blazor-ui/tree/master/grid/scroll-to-selected-row +## See Also +* [Grid row selection]({%slug grid-selection-row%}) +* [Grid paging feature]({%slug components/grid/features/paging%}) +* [Grid virtualization feature]({%slug components/grid/virtual-scrolling%}) From 0513765fb200b17fce16bcc008179a51a928e3f7 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 5 Nov 2024 15:10:11 +0200 Subject: [PATCH 2/9] Update knowledge-base/grid-scroll-to-selected-row.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- 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 82da49574d..b9dcfc45dc 100644 --- a/knowledge-base/grid-scroll-to-selected-row.md +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -282,6 +282,6 @@ The example below offers comments in the code on some possible improvements. ```` ## See Also -* [Grid row selection]({%slug grid-selection-row%}) +* [Grid Row Selection]({%slug grid-selection-row%}) * [Grid paging feature]({%slug components/grid/features/paging%}) * [Grid virtualization feature]({%slug components/grid/virtual-scrolling%}) From 023917fc854775cb989818be5a1fc3621c6cacd8 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Tue, 5 Nov 2024 15:10:50 +0200 Subject: [PATCH 3/9] Update knowledge-base/grid-scroll-to-selected-row.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- 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 b9dcfc45dc..38c574c155 100644 --- a/knowledge-base/grid-scroll-to-selected-row.md +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -32,7 +32,7 @@ The solution to select programatically a row in Grid and scroll to that selected ### Grid with **[paging feature]({%slug components/grid/features/paging%})** 1. Ensure the Grid is on the same page as the selected row. -1. Invoke a JavaScript to make the browser scroll to the selected row into view. The browsers provide the `scrollIntoView()` method that does the scrolling. You can find a selected row in the grid markup by the `k-selected` CSS class it has. +1. Invoke a JavaScript to make the browser scroll to the selected row into view. The browsers provide the `scrollIntoView()` method that does the scrolling. You can find a selected row in the grid markup by its `k-selected` CSS class. ### Grid with **[virtualization feature]({%slug components/grid/virtual-scrolling%})** From d73e9514a1bf3543d82aa02e400090a0eb9b4dc0 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Wed, 6 Nov 2024 17:55:51 +0200 Subject: [PATCH 4/9] Update knowledge-base/grid-scroll-to-selected-row.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- 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 38c574c155..222c80f3fe 100644 --- a/knowledge-base/grid-scroll-to-selected-row.md +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -23,7 +23,7 @@ res_type: kb ## Description -I want to [select a row in Grid]({%slug grid-selection-row%}) programmatically based on some program logic and conditions. I want after that to scroll the Grid to the selected row so the user can see the selected row. +I want to programmatically [select a row in the Grid]({%slug grid-selection-row%}) based on specific conditions in my code. Once selected, I’d like the Grid to automatically scroll to that row so it’s visible to the user. ## Solution From 471a48ff00d3b8388819e4c43251e4c806d8e737 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Wed, 6 Nov 2024 17:56:12 +0200 Subject: [PATCH 5/9] Update knowledge-base/grid-scroll-to-selected-row.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/grid-scroll-to-selected-row.md | 1 + 1 file changed, 1 insertion(+) diff --git a/knowledge-base/grid-scroll-to-selected-row.md b/knowledge-base/grid-scroll-to-selected-row.md index 222c80f3fe..1440dcaed3 100644 --- a/knowledge-base/grid-scroll-to-selected-row.md +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -78,6 +78,7 @@ The example below offers comments in the code on some possible improvements. ShowClearButton="true" DebounceDelay="500" Width="300px" + FilterOperator="StringFilterOperator.Contains" ValueChanged="@ValueChangedInPageMode"> From 193585e7ea60453ca759bff9ddb0c8787926df62 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Wed, 6 Nov 2024 17:56:56 +0200 Subject: [PATCH 6/9] Update knowledge-base/grid-scroll-to-selected-row.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/grid-scroll-to-selected-row.md | 1 + 1 file changed, 1 insertion(+) diff --git a/knowledge-base/grid-scroll-to-selected-row.md b/knowledge-base/grid-scroll-to-selected-row.md index 1440dcaed3..d7c0e665fb 100644 --- a/knowledge-base/grid-scroll-to-selected-row.md +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -103,6 +103,7 @@ The example below offers comments in the code on some possible improvements. ShowClearButton="true" DebounceDelay="500" Width="300px" + FilterOperator="StringFilterOperator.Contains" ValueChanged="@ValueChangedInVirtualization"> From e723385c35ed23fb50576830d625aca8ec5c0098 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Wed, 6 Nov 2024 17:57:08 +0200 Subject: [PATCH 7/9] Update knowledge-base/grid-scroll-to-selected-row.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- 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 d7c0e665fb..b1d278a90b 100644 --- a/knowledge-base/grid-scroll-to-selected-row.md +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -149,7 +149,7 @@ The example below offers comments in the code on some possible improvements. #region Event Handlers - private async Task ValueChangedInPageMode(string newValue) + private async Task HandleSelectedRowWithPageMode(string newValue) { SelectedEmployeeInPageMode = newValue; From 572fa15c96a37260f474251029e077eadf1c3d4a Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Wed, 6 Nov 2024 17:57:13 +0200 Subject: [PATCH 8/9] Update knowledge-base/grid-scroll-to-selected-row.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- 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 b1d278a90b..ab9c835369 100644 --- a/knowledge-base/grid-scroll-to-selected-row.md +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -173,7 +173,7 @@ The example below offers comments in the code on some possible improvements. } } - private async Task ValueChangedInVirtualization(string newValue) + private async Task HandleSelectedRowWithVirtualization(string newValue) { SelectedEmployeeInVirtualization = newValue; From a01567cef3293b06faeb4f86b8f85c980716f39d Mon Sep 17 00:00:00 2001 From: NansiYancheva Date: Thu, 7 Nov 2024 15:32:04 +0200 Subject: [PATCH 9/9] docs(Grid): update after review --- knowledge-base/grid-scroll-to-selected-row.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/knowledge-base/grid-scroll-to-selected-row.md b/knowledge-base/grid-scroll-to-selected-row.md index ab9c835369..0b8e71b16c 100644 --- a/knowledge-base/grid-scroll-to-selected-row.md +++ b/knowledge-base/grid-scroll-to-selected-row.md @@ -79,7 +79,7 @@ The example below offers comments in the code on some possible improvements. DebounceDelay="500" Width="300px" FilterOperator="StringFilterOperator.Contains" - ValueChanged="@ValueChangedInPageMode"> + ValueChanged="@HandleSelectedRowWithPageMode"> + ValueChanged="@HandleSelectedRowWithVirtualization">