Skip to content

Commit 1ed1cdf

Browse files
github-actions[bot]KB Bot
github-actions[bot]
and
KB Bot
authored
Added new kb article grid-search-navigate-specific-child-item-in-hierarchy-grid (#706)
Co-authored-by: KB Bot <[email protected]>
1 parent f1bd823 commit 1ed1cdf

File tree

1 file changed

+202
-0
lines changed

1 file changed

+202
-0
lines changed

‎knowledge-base/grid-search-navigate-specific-child-item-in-hierarchy-grid.md‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
title: Searching and Jumping to Specific Node in Hierarchy Grid
3+
description: Learn how to search within a hierarchy grid in UI for ASP.NET AJAX and jump to a specific node.
4+
type: how-to
5+
page_title: How to Search and Navigate to Specific Child Item in Hierarchy Grid
6+
meta_title: How to Search and Navigate to Specific Child Item in Hierarchy Grid
7+
slug: grid-search-navigate-specific-child-item-in-hierarchy-grid
8+
tags: hierarchy, search, node, navigation, grid, ui-for-aspnet-ajax
9+
res_type: kb
10+
ticketid: 1694304
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td>Product</td>
19+
<td>Grid for UI for ASP.NET AJAX</td>
20+
</tr>
21+
<tr>
22+
<td>Version</td>
23+
<td>All</td>
24+
</tr>
25+
</tbody>
26+
</table>
27+
28+
## Description
29+
30+
I want to search within a hierarchy grid and directly navigate to a specific child node. Currently, the search functionality retrieves parent and child data, but I need to enhance it to jump to the child node automatically.
31+
32+
This knowledge base article also answers the following questions:
33+
34+
- How to implement jump-to functionality in hierarchy grid?
35+
- How to expand parent rows in hierarchy grid based on search?
36+
- How to highlight specific child nodes after searching in hierarchy grid?
37+
38+
## Solution
39+
40+
To achieve this behavior, use the `ClientDataKeyNames` property for both parent and child grids along with the `HierarchyLoadMode` property. Implement a JavaScript function that searches for the desired item, expands the parent row if necessary, and navigates to the specific child node:
41+
42+
1. Define the `ClientDataKeyNames` property for both parent and child grids.
43+
2. Set the `HierarchyLoadMode` property to `Client`.
44+
3. Add a custom JavaScript function to search and navigate to the desired node.
45+
4. Use the `scrollIntoView` method for smooth scrolling and highlight the found row.
46+
47+
````JavaScript
48+
function jumpToOrderDetail(sender, args) {
49+
let orderID = 2; // ID of the item being searched
50+
51+
let masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
52+
let parentItems = masterTable.get_dataItems();
53+
54+
parentItems.forEach((parentItem) => {
55+
let dataKey = parseInt(parentItem.getDataKeyValue("OrderID"));
56+
57+
if (dataKey === orderID) {
58+
if (!parentItem.get_expanded()) {
59+
masterTable.expandItem(parentItem.get_element());
60+
}
61+
62+
setTimeout(function () { // Wait for child table to load
63+
let childTableView = parentItem.get_nestedViews()[0];
64+
let childItems = childTableView.get_dataItems();
65+
66+
childItems.forEach((childItem) => {
67+
let childDataKey = parseInt(childItem.getDataKeyValue("OrderID"));
68+
69+
if (childDataKey === orderID) {
70+
let childRow = childItem.get_element();
71+
childRow.scrollIntoView({ behavior: "smooth", block: "center" });
72+
73+
childRow.style.backgroundColor = "#ffff99"; // Highlight the row
74+
}
75+
});
76+
}, 500); // Slight delay for nested table load
77+
}
78+
});
79+
}
80+
````
81+
82+
````ASP.NET
83+
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px"
84+
OnNeedDataSource="RadGrid1_NeedDataSource"
85+
OnDetailTableDataBind="RadGrid1_DetailTableDataBind">
86+
<MasterTableView Name="Orders" AutoGenerateColumns="False" ClientDataKeyNames="OrderID" DataKeyNames="OrderID" HierarchyLoadMode="Client">
87+
<Columns>
88+
<telerik:GridNumericColumn DataField="OrderID" DataType="System.Int32"
89+
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
90+
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
91+
</telerik:GridNumericColumn>
92+
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
93+
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
94+
SortExpression="OrderDate" UniqueName="OrderDate">
95+
</telerik:GridDateTimeColumn>
96+
<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
97+
FilterControlAltText="Filter Freight column" HeaderText="Freight"
98+
SortExpression="Freight" UniqueName="Freight">
99+
</telerik:GridNumericColumn>
100+
<telerik:GridBoundColumn DataField="ShipName"
101+
FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
102+
SortExpression="ShipName" UniqueName="ShipName">
103+
</telerik:GridBoundColumn>
104+
<telerik:GridBoundColumn DataField="ShipCountry"
105+
FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
106+
SortExpression="ShipCountry" UniqueName="ShipCountry">
107+
</telerik:GridBoundColumn>
108+
</Columns>
109+
<DetailTables>
110+
<telerik:GridTableView Name="OrderDetails" ClientDataKeyNames="OrderID" AutoGenerateColumns="false">
111+
<Columns>
112+
<telerik:GridNumericColumn DataField="OrderID" DataType="System.Int32"
113+
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
114+
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
115+
</telerik:GridNumericColumn>
116+
<telerik:GridNumericColumn DataField="UnitPrice" DataType="System.Decimal"
117+
FilterControlAltText="Filter UnitPrice column" HeaderText="UnitPrice"
118+
SortExpression="UnitPrice" UniqueName="UnitPrice">
119+
</telerik:GridNumericColumn>
120+
<telerik:GridNumericColumn DataField="Quantity" DataType="System.Int32"
121+
FilterControlAltText="Filter Quantity column" HeaderText="Quantity"
122+
SortExpression="Quantity" UniqueName="Quantity">
123+
</telerik:GridNumericColumn>
124+
<telerik:GridNumericColumn DataField="Discount" DataType="System.Decimal"
125+
FilterControlAltText="Filter Discount column" HeaderText="Discount"
126+
SortExpression="Discount" UniqueName="Discount">
127+
</telerik:GridNumericColumn>
128+
</Columns>
129+
</telerik:GridTableView>
130+
</DetailTables>
131+
</MasterTableView>
132+
</telerik:RadGrid>
133+
134+
<telerik:RadButton runat="server" ID="RadButton1" Text="Postback" AutoPostBack="false" OnClientClicked="jumpToOrderDetail" />
135+
````
136+
137+
````C#
138+
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
139+
{
140+
(sender as RadGrid).DataSource = OrdersTable();
141+
}
142+
143+
protected void RadGrid1_DetailTableDataBind(object sender, GridDetailTableDataBindEventArgs e)
144+
{
145+
if (e.DetailTableView.Name == "OrderDetails")
146+
{
147+
GridDataItem parentItem = e.DetailTableView.ParentItem;
148+
int orderId = (int)parentItem.GetDataKeyValue("OrderID");
149+
e.DetailTableView.DataSource = OrderDetailsTable().Select($"OrderID = '{orderId}'");
150+
}
151+
}
152+
153+
private DataTable OrdersTable()
154+
{
155+
DataTable dt = new DataTable();
156+
dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
157+
dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
158+
dt.Columns.Add(new DataColumn("Freight", typeof(double)));
159+
dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
160+
dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));
161+
dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };
162+
163+
for (int i = 0; i < 100; i++)
164+
{
165+
DataRow row = dt.NewRow();
166+
row["OrderID"] = i + 1;
167+
row["OrderDate"] = DateTime.Now.Date.AddDays(i + 1);
168+
row["Freight"] = (i + 1) * 0.01;
169+
row["ShipName"] = "Name " + (i + 1);
170+
row["ShipCountry"] = "Country " + (i + 1);
171+
dt.Rows.Add(row);
172+
}
173+
174+
return dt;
175+
}
176+
177+
private DataTable OrderDetailsTable()
178+
{
179+
DataTable dt = new DataTable();
180+
dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
181+
dt.Columns.Add(new DataColumn("UnitPrice", typeof(decimal)));
182+
dt.Columns.Add(new DataColumn("Quantity", typeof(int)));
183+
dt.Columns.Add(new DataColumn("Discount", typeof(decimal)));
184+
185+
var orders = OrdersTable();
186+
foreach (DataRow order in orders.Rows)
187+
{
188+
for (int i = 0; i < 4; i++)
189+
{
190+
DataRow row = dt.NewRow();
191+
row["OrderID"] = order["OrderID"];
192+
row["UnitPrice"] = i + 1;
193+
row["Quantity"] = i + 1;
194+
row["Discount"] = (i + 1) * 0.01;
195+
dt.Rows.Add(row);
196+
}
197+
}
198+
199+
return dt;
200+
}
201+
````
202+

0 commit comments

Comments
 (0)