How to pass data about selected row to GridTemplate?

[Dave]

I have a grid defined like this: I'll refer to it as grid A.

@(Html.Kendo().Grid<My.NameSpace.ViewModel>()
 .Name("grid")
 .Columns(columns =>
 {
 columns.Bound(p => p.ColumnA)
 columns.Bound(p => p.ColumnB).Width(130);
 columns.Bound(p => p.ColumnC);
 columns.Bound(p => p.ColumnD).Width(130);
 columns.Command(command => { command.Edit(); }).Width(160);
 })
 .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditingTemplate"))
 .Events(e => e.Edit("onEdit"))
 .Pageable()
 .Sortable()
 .Scrollable()
 .HtmlAttributes(new { style = "height:430px;" })
 .DataSource(dataSource => dataSource
 .Ajax()
 .PageSize(20)
 .Events(events => events.Error("error_handler"))
 .Model(model => model.Id(p => p.ViewModelID))
 .Create(update => update.Action("A_Create", "ControllerName"))
 .Read(read => read.Action("A_read", "ControllerName"))
 .Update(update => update.Action("A_Update", "ControllerName"))
 .Destroy(update => update.Action("A_Destroy", "ControllerName"))
 )

When the user clicks the "Edit" button in the grid, and thus launches "EditingTemplate" I want to pass the ID from the model of the selected row to the "EditingTemplate". The reason for this, is I want to pass the ID to another kendo grid that exists on the "EditingTemplate". I will refer to that as grid B. 

I have defined an "additionalData" function that is called by the read method on grid B, so I have   

.Read(read => read.Action("B_read","ControllerName").data("additionalData"))

function additionalData() {
var myID = %%How do I get this value from the selected row to edit from grid A?%%

return {
  ViewModelID: myID
 }
}

So far I have tried setting the value on a hidden field in grid A's "edit" event, and then retrieving it in additionalData, however the methods fire in the wrong order, so first additionalData fires, then the edit event fires. additionalData never is able to access the value.

I have also tried things in the additionalData to like below, however the result is always "undefined"

var item = $("#grid").data("kendoGrid").model/dataItem/data/item

I have also tried

var grid = $("#grid").data("kendoGrid");
var item = grid.dataItem(grid.select());

This produces the following error in Kendo.all.js

Unhandled exception at line 36448, column 13 in http://SERVERNAME/Scripts/kendo/kendo.all.js0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'value': object is null or undefinedIf there is a handler for this exception, the program may be safely continued.

None of the above options work. I don't understand why this is so difficult to do. Can someone show me the correct way of doing this?

Thanks  

[Ricardo]

Add this
<script>
   function onEdit(e) {
      e.preventDefault();
     var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
     var id = dataItem.id;
     ~~~ rest of your code  ~~~

};
</script>

[Dave]

Thanks,

Before you posted, I ended up discovering this post which helped me out a lot..

http://www.ask-coder.com/3500250/grid-into-grid-popup-editor-passing-id-parameter-in-sub-grid

In case it goes away, the gist of it was to disable the AutoBind of the inner grid (grid B in my case) to false. Then once you did that, set the ID on grid A's onEdit event to call out the read function/method of grid B's dataSource

function onEditOfGridA(e){
    $('#gridB').data().kendoGrid.dataSource.read({SelectedRowID:e.model.SelectedRowID})
}

public ActionResult GridB_Read([DataSourceRequest]DataSourceRequest request, int SelectedRowID) { ...}