Skip to content

Commit 2c46a72

Browse files
github-actions[bot]KB Bot
andauthored
Added new kb article grid-how-to-access-child-row-datakeyname-from-combobox (#679)
Co-authored-by: KB Bot <[email protected]>
1 parent d129c13 commit 2c46a72

File tree

1 file changed

+78
-0
lines changed

1 file changed

+78
-0
lines changed
Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: Accessing Child Row DataKeyName From ComboBox in RadGrid for ASP.NET AJAX
3+
description: This article demonstrates how to retrieve the DataKeyName value of a child row in RadGrid during the ComboBox's OnClientItemsRequesting event.
4+
type: how-to
5+
page_title: How to Access Child Row DataKeyName in RadGrid for ASP.NET AJAX From the ComboBox's OnClientItemsRequesting Event
6+
slug: grid-how-to-access-child-row-datakeyname-from-combobox
7+
tags: radgrid, asp.net ajax, datakeyname, onclientitemsrequesting, hierarchical grid, batch editing
8+
res_type: kb
9+
ticketid: 1685179
10+
---
11+
12+
## Description
13+
When working with a hierarchical RadGrid with batch editing enabled for the child table, there may be a need to access the DataKeyName value of a child row within the `OnClientItemsRequesting` event. This is particularly useful for passing the DataKeyName to the context, allowing the `OnItemsRequested` event handler to use it for populating the ComboBox datasource. This knowledge base article also answers the following questions:
14+
- How can I retrieve a child row's DataKeyName in RadGrid for ASP.NET AJAX?
15+
- What is the process to access hidden DataKeyNames in a RadGrid's child table?
16+
- How to use the OnClientItemsRequesting event to get DataKeyName from a child row in RadGrid?
17+
18+
## Environment
19+
<table>
20+
<tbody>
21+
<tr>
22+
<td>Product</td>
23+
<td>RadGrid for ASP.NET AJAX</td>
24+
</tr>
25+
</tbody>
26+
</table>
27+
28+
## Solution
29+
To access the `OrderDetailID` DataKeyName value from the detail table in the `OnClientItemsRequesting` event, even if it's not a displayed column, set the `DataKeyNames` attribute to "OrderDetailID" and use the `ClientDataKeyNames` to access the value on the front-end. Here is the approach to achieve this:
30+
31+
1. Ensure the `DataKeyNames` and `ClientDataKeyNames` attributes are correctly set in your RadGrid definition.
32+
33+
````ASP.NET
34+
<telerik:RadGrid ID="RadGrid1" runat="server" Width="400" OnNeedDataSource="RadGrid1_NeedDataSource" OnDetailTableDataBind="RadGrid1_DetailTableDataBind">
35+
<MasterTableView Name="Orders" AutoGenerateColumns="False" DataKeyNames="OrderID" EditMode="Batch">
36+
<Columns>
37+
...
38+
</Columns>
39+
<DetailTables>
40+
<telerik:GridTableView Name="OrderDetails" AutoGenerateColumns="false" EditMode="Batch" ClientDataKeyNames="OrderDetailID" DataKeyNames="OrderDetailID">
41+
<Columns>
42+
...
43+
</Columns>
44+
</telerik:GridTableView>
45+
</DetailTables>
46+
</MasterTableView>
47+
</telerik:RadGrid>
48+
````
49+
50+
2. Adjust the JavaScript function to find the correct data item and access the `OrderDetailID`.
51+
52+
````JavaScript
53+
function onClientItemsRequested(sender, args) {
54+
let comboElement = sender.get_element(); // Get the ComboBox element
55+
let rowElement = $(comboElement).closest("tr.rgRow, tr.rgAltRow")[0];
56+
57+
if (rowElement) {
58+
let detailTables = $find("<%=RadGrid1.ClientID %>").get_detailTables(); // Get the Detail Tables
59+
60+
let currentDetailTable = Array.from(detailTables).find((table) => {
61+
let editedComboBox = table.get_element().querySelector(".rgBatchCurrent .rgBatchContainer .RadComboBox");
62+
return editedComboBox && comboElement.id === editedComboBox.id;
63+
}); // Find the currently edited Detail Table
64+
65+
if (currentDetailTable) {
66+
let dataItem = currentDetailTable.get_dataItems()[rowElement.rowIndex]; // Get the DataItem
67+
let orderDetailID = parseInt(dataItem.getDataKeyValue("OrderDetailID")); // Find the detail order id
68+
console.log(orderDetailID);
69+
}
70+
}
71+
}
72+
````
73+
74+
By utilizing the `find` method to match the currently edited ComboBox, you ensure that you are accessing the detail table corresponding to the row you are interacting with. This method allows you to retrieve the `OrderDetailID` of the correct row effectively.
75+
76+
## See Also
77+
- [RadGrid for ASP.NET AJAX Documentation](https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/overview)
78+
- [Client-Side Programming Overview](https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/overview)

0 commit comments

Comments
 (0)