Interacting with Kendo Ui Child Grid - asp.net-mvc

Question

I'm currently using the MVC Kendo Grid with Hierarchy view to display child accounts.
Here is my main grid (child below) For this grid I have set up the change event (also below). My question is, how do I set up the same change functionality with the child grid? Each will have a different ID so I'm not currently able to properly select it.
EDIT: I ONLY NEED THE ID OF THE ACCOUNT FROM THE SELECTED CHILD ROW
#(Html.Kendo().Grid<TRX.CRM.Dashboard.Entities.DashBoard.Accounts>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Acct_FName).Width(80);
columns.Bound(p => p.Acct_LName).Width(80);
columns.Bound(p => p.Acct_Type).Width(90);
columns.Bound(p => p.Acct_LastContact).Width(140);
columns.Bound(p => p.Acct_Zip).Hidden();
columns.Bound(p => p.ID).Hidden();
})
.ClientDetailTemplateId("ChildAccounts")
.DataSource(dataSource => dataSource
.Ajax() // Specify that the data source is of ajax type
.Model(model => model.Id(a => a.ID))
.Events(events => events.Error("error"))
.Read(read => read.Action("ReadAccounts", "Accounts")) // Specify the action method and controller name
.Destroy(destroy => destroy.Action("DeleteAccount", "Accounts"))
.PageSize(50)
)
.Pageable()
.Filterable()
.Selectable()
.Scrollable()
.Sortable()
.Events(events => events.Change("gridChange"))
.Events(events => events.DataBound("dataBound"))
.ToolBar(toolbar => toolbar.Template(
#<text>
<div class="toolbar">
<select id="FilterCategory"></select>
<input type="search" id="Search" style="width: 230px" />
</div>
</text>
))
)
Child Grid:
<script id="ChildAccounts" type="text/kendo-tmpl">
#(Html.Kendo().Grid<TRX.CRM.Dashboard.Entities.DashBoard.Accounts>()
.Name("SubAccounts_#=ID#")
.Columns(columns =>
{
columns.Bound(p => p.Acct_FName).Width(80);
columns.Bound(p => p.Acct_LName).Width(80);
columns.Bound(p => p.Acct_Type).Width(90);
columns.Bound(p => p.Acct_LastContact).Width(140);
columns.Bound(p => p.Acct_Zip).Hidden();
columns.Bound(p => p.ID).Hidden();
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadSubAccounts", "Accounts", new { ID = "#=ID#" }))
)
.Pageable()
.Sortable()
.Selectable()
.ToClientTemplate()
)
</script>
function dataBound() {
// this.expandRow(this.tbody.find("tr.k-master-row").first());
}
Here is the GridChange function (shortened for brevity)
function gridChange(e) {
//Enable all button -Prakash Date-07/27/2012
accountsButtons.button({ disabled: false });
$("#nodeList").html('');
$("#updateMessage").html('');
$("#noteMessage").html('');
$("#Note_Description").val('');
kdata = this;

Answer 1

You have absolutely no problem to declare the same event into the child Grid.
#(Html.Kendo().Grid<TRX.CRM.Dashboard.Entities.DashBoard.Accounts>()
.Name("SubAccounts_#=ID#")
.Columns(columns =>
{
columns.Bound(p => p.Acct_FName).Width(80);
columns.Bound(p => p.Acct_LName).Width(80);
columns.Bound(p => p.Acct_Type).Width(90);
columns.Bound(p => p.Acct_LastContact).Width(140);
columns.Bound(p => p.Acct_Zip).Hidden();
columns.Bound(p => p.ID).Hidden();
})
.Events(ev=>ev.Change("detailGridChange"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadSubAccounts", "Accounts", new { ID = "#=ID#" }))
)
.Pageable()
.Sortable()
.Selectable()
.ToClientTemplate()
)
<script>
function detailGridChange(e){
var parentDataItem = $('#Grid').data().kendoGrid.dataItem($(this.element).closest('.k-detail-row').prev('.k-master-row'));
alert(parentDataItem.ID);
}
</script>