Pass values of kendo grid to popup window - kendo-ui

Question

I have implemented a kendo grid and context menu in my MVC5 page. I open a window on click of the Update Status menu. I need to retrieve the requestid and couple of other fields from the selected row in the pop up window. I would also need to show a drop down control with values. Whats the best way of doing it
Grid
div class="requestgrid" id="requestGrid">
#(Html.Kendo().Grid<CC.GRP.MCRequest.ViewModels.RequestViewModel>()
.Name("GridRequest")
.Columns(columns => {
columns.Bound(o => o.RequestID).Width("100px");
columns.Bound(o => o.CountryCode).Width("100px");
columns.Bound(o => o.SalesOffice).Width("100px");
columns.Bound(o => o.CustomerNumber).Width("120px");
columns.Bound(o => o.ProjectName).Width("120px");
columns.Bound(o => o.ProjectContent).Width("120px");
columns.Bound(o => o.ContractStartDate).Width("140px");
columns.Bound(o => o.Priority).Width("120px");
columns.Bound(o => o.NameOfResponsiblePerson).Width("170px");
columns.Bound(o => o.Status).Width("100px");
columns.Bound(o => o.CreatedBy).Width("110px");
columns.Bound(o => o.CreatedDate).Width("110px");
columns.Bound(o => o.ModifiedBy).Width("110px");
})
//.ToolBar(toolbar => toolbar.Create())
//.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Filterable()
.Scrollable()
.Groupable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row))
.Events(events => events
.Change("onChange")
)
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(t => t.RequestID))
//.Create(update => update.Action("Team_Create", "Admin"))
.Read(read => read.Action("Requests_Read", "Request"))
//.Update(update => update.Action("Team_Update", "Admin"))
)
)
Context Menu
#(Html.Kendo().ContextMenu()
.Name("RequestMenu")
.Target("#GridRequest")
.Filter("tr")
.Orientation(ContextMenuOrientation.Vertical)
.Animation(animation =>
{
animation.Open(open =>
{
open.Fade(FadeDirection.In);
open.Duration(500);
});
})
.Items(items =>
{
items.Add()
.Text("Edit");
items.Add()
.Text("Update Status");
})
.Events(e =>
{
e.Select("onSelect");
})
)
Javascript
function onSelect(e) {
var grid = $("#GridTeam").data("kendoGrid");
var requestId;
switch ($(e.item).children(".k-link").text()) {
case "Edit":
var grid = $("#GridRequest").data("kendoGrid");
var column = grid.columns[0];
var selectedBackup = grid.dataItem(grid.select());
requestId = selectedBackup.id;
window.location.href = '#Url.Action("EditRequest", "Request", new { id = "_id_", status="Edit" })'.replace('_id_', requestId);
break;
case "Update Status":
//alert("Work in progress");
//$('#window1').data('kendoWindow').center().open();
var myWindow = $("#window");
//e.preventDefault();
//var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
//kendo.bind($("#window"), dataItem);
myWindow.kendoWindow({
width: "400px",
height: "180px",
title: "Update Request Status",
modal: true,
visible: false,
actions: ["Minimize", "Maximize", "Close"],
}).data("kendoWindow");
myWindow.data("kendoWindow").center().open();
}

Answer 1

You're doing it almost right, only by two details:
If you bind the contextMenu's target to the grid's container, you'll never be sure which row user did clicked. I suggest you to bind to your grid's rows(TR) instead, e.g. #GridRequest tbody tr;
I'm afraid e.currentTarget doesn't exists or returns undefined in that context. You should use e.target which will point to the clicked row if you did what I suggested above. Then you could get your dataItem as follows:
grid.dataItem(e.target);
Check out this demo with my suggestions working.