From ac4d0eea77293935d0583186da2c9329b336211e Mon Sep 17 00:00:00 2001 From: KB Bot Date: Wed, 16 Jul 2025 06:48:03 +0000 Subject: [PATCH] Added new kb article treelist-paging-pre-selected-node --- .../treelist-paging-pre-selected-node.md | 120 ++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 knowledge-base/treelist-paging-pre-selected-node.md diff --git a/knowledge-base/treelist-paging-pre-selected-node.md b/knowledge-base/treelist-paging-pre-selected-node.md new file mode 100644 index 000000000..fa155129b --- /dev/null +++ b/knowledge-base/treelist-paging-pre-selected-node.md @@ -0,0 +1,120 @@ +--- +title: How to Initially Display the Page with a Pre-Selected Node in TreeList +description: Learn how to ensure a pre-selected node is visible by automatically navigating to its page in a Telerik TreeList with pagination enabled. +type: how-to +page_title: Navigate to Page Containing Pre-Selected Node in TreeList +meta_title: Navigate to Page Containing Pre-Selected Node in TreeList +slug: treelist-kb-paging-pre-selected-node +tags: treelist, paging, pre-selected, node, navigation, page, size, blazor +res_type: kb +ticketid: 1690423 +--- + +## Environment + + + + + + + + +

Product

TreeList for Blazor

+ +## Description + +I have a Telerik [TreeList](slug:treelist-overview) with a checkbox for selection and pagination enabled. I pre-select a node programmatically and need the TreeList to automatically navigate to the page containing the first selected node. + +## Solution + +To automatically show the page that contains the first pre-selected node in your Telerik TreeList with paging enabled, you need to programmatically set the TreeList's `Page` property based on the index of the selected node in your data. + +1. Identify the index of the first selected node in your data source. +2. Use the PageSize to determine on which page the node appears. +3. Assign the calculated page number to the TreeList's Page parameter before rendering. + +````Razor + + + + + + + + + +@code { + private List TreeListData { get; set; } = new(); + private IEnumerable SelectedEmployees { get; set; } = Enumerable.Empty(); + private int PageSize = 10; + private int CurrentPage = 1; + + protected override void OnInitialized() + { + TreeListData = new List(); + + for (int i = 1; i <= 59; i++) + { + TreeListData.Add(new Employee() + { + Id = i, + ParentId = i <= 3 ? null : i % 3 + 1, + FirstName = "First " + i, + LastName = "Last " + i, + Position = i <= 3 ? "Team Lead" : "Software Engineer" + }); + } + + SelectedEmployees = new List() { TreeListData.ElementAt(2) }; + + var selectedId = SelectedEmployees.FirstOrDefault()?.Id; + if (selectedId != null) + { + // Step 1: Flatten the tree as it would appear expanded + var flatList = new List(); + foreach (var root in TreeListData.Where(e => e.ParentId == null)) + { + FlattenHierarchy(root, flatList); + } + + // Step 2: Find index of selected item in flattened list + var index = flatList.FindIndex(e => e.Id == selectedId); + if (index >= 0) + { + CurrentPage = (index / PageSize) + 1; + } + } + } + + private void FlattenHierarchy(Employee node, List result) + { + result.Add(node); + var children = TreeListData.Where(e => e.ParentId == node.Id); + foreach (var child in children) + { + FlattenHierarchy(child, result); + } + } + + public class Employee + { + public int Id { get; set; } + public int? ParentId { get; set; } + public string FirstName { get; set; } = string.Empty; + public string LastName { get; set; } = string.Empty; + public string Position { get; set; } = string.Empty; + } +} +```` + +## See Also + +* [TreeList Overview](slug:treelist-overview) +* [TreeList Paging](slug:treelist-paging) pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: