Interacting with Kendo Ui Child Grid

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>