docs(grid): add info on traversing the DOM to get client side row object

Author: Marin Bratanov

controls/grid/rows/accessing-cells-and-rows.md

@@ -339,7 +339,112 @@ Read more in the [Batch editing mode]({%slug grid/data-editing/edit-mode/batch-e
 
 ## Accessing Cells and Values in Client-Side Code
 
-Once you have a reference to the client-side object of a **GridDataItem**, there are several ways to access its cell values.
+Once you have a reference to the client-side object of a **GridDataItem**, there are several ways to access its cell values. There are several ways to get a reference to the grid data item object.
+
+>caption How to access the data item object by traversing the DOM:
+
+
+````JavaScript
+function getDataClientSide(btn) {
+	var $ = $telerik.$;//or use other jQuery
+
+	//get the DOM object of the grid row - the <tr> element
+	var gridRowElem = $(btn).parents("tr").first()[0];
+
+	//here is how you can get the grid
+	//var grid = $(btn).parents("div.RadGrid").first()[0].control;
+	//console.log(grid);
+
+	//get a reference to the client-side object of the grid row to use its API
+	var gridRowObj = gridRowElem.control;
+
+	//get the value of a column that you have added to the ClientDataKeyNames collection
+	var nameFieldValue = gridRowObj.getDataKeyValue("name");
+
+	alert(nameFieldValue)
+
+	//you can use the other available methods of the item
+	//alert(gridRowObj.get_itemIndexHierarchical())
+}
+function enumareteDataItems(sender, args) {
+	//enumerate the data items so they are available
+	//this puts them in memory, so you can move it to the button click handler
+	//which will, however, cause the enumeration on every click
+	sender.get_masterTableView().get_dataItems();
+}
+````
+
+and the grid declaration. Note the `ClientDataKeyNames` so you can access those columns client-side.
+
+````ASP.NET
+<telerik:RadGrid runat="server" ID="RadGrid1" RenderMode="Lightweight" OnItemCommand="RadGrid1_ItemCommand" OnNeedDataSource="RadGrid1_NeedDataSource">
+	<ClientSettings>
+		<ClientEvents OnGridCreated="enumareteDataItems" />
+	</ClientSettings>
+	<MasterTableView AutoGenerateColumns="false" ClientDataKeyNames="id,name">
+		<Columns>
+			<telerik:GridBoundColumn UniqueName="id" DataField="id"></telerik:GridBoundColumn>
+			<telerik:GridBoundColumn UniqueName="name" DataField="name"></telerik:GridBoundColumn>
+			<telerik:GridBoundColumn UniqueName="someData" DataField="data"></telerik:GridBoundColumn>
+			<telerik:GridBoundColumn UniqueName="otherData" DataField="someColumn"></telerik:GridBoundColumn>
+			<telerik:GridTemplateColumn UniqueName="myDeleteColumn">
+				<ItemTemplate>
+					<asp:Button ID="Button1" CommandName="Delete" Text="Get column value client-side by traversing the DOM" OnClientClick="getDataClientSide(this); return false;" runat="server" />
+				</ItemTemplate>
+			</telerik:GridTemplateColumn>
+		</Columns>
+	</MasterTableView>
+</telerik:RadGrid>
+````
+````C#
+protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
+{
+	(sender as RadGrid).DataSource = GetData();
+}
+
+protected DataTable GetData()
+{
+	DataTable tbl = new DataTable();
+	tbl.Columns.Add(new DataColumn("id", typeof(decimal)));
+	tbl.Columns.Add(new DataColumn("name", typeof(string)));
+	tbl.Columns.Add(new DataColumn("data", typeof(decimal)));
+	tbl.Columns.Add(new DataColumn("someColumn", typeof(string)));
+	tbl.Rows.Add(new object[] { 1, "one", 2, "5" });
+	tbl.Rows.Add(new object[] { 2, "two", 3, null/*SIMULATE EMPTY VALUE*/ });
+	tbl.Rows.Add(new object[] { 3, "three", 4, "5" });
+	tbl.Rows.Add(new object[] { 4, "four", 5, "5" });
+
+	return tbl;
+}
+````
+````VB
+Protected Sub RadGrid1_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs)
+	TryCast(sender, RadGrid).DataSource = GetData()
+End Sub
+
+Protected Function GetData() As DataTable
+	Dim tbl As New DataTable()
+	tbl.Columns.Add(New DataColumn("id", GetType(Decimal)))
+	tbl.Columns.Add(New DataColumn("name", GetType(String)))
+	tbl.Columns.Add(New DataColumn("data", GetType(Decimal)))
+	tbl.Columns.Add(New DataColumn("someColumn", GetType(String)))
+	tbl.Rows.Add(New Object() {1, "one", 2, "5"})
+		'SIMULATE EMPTY VALUE
+	tbl.Rows.Add(New Object() {2, "two", 3, Nothing})
+	tbl.Rows.Add(New Object() {3, "three", 4, "5"})
+	tbl.Rows.Add(New Object() {4, "four", 5, "5"})
+
+	Return tbl
+End Function
+````
+
+>caption How to access the data item object by its index:
+
+````JavaScript
+var grid = $find('<%= RadGrid1.ClientID %>');
+var masterTable = grid.get_masterTableView();
+var item = masterTable.get_dataItems()[3];//where 3 is the hierarchical index of the item you want
+````
 
 * Using **get_cell()** method is the most straightforward approach to achieve that.