I have a checkbox on each row of the grid on which if selected trying to get the id of that row. I have been using grid.dataItem($(event.target).closest("tr")) which was working perfectly fine and suddenly it stopped working giving null exception. I am using in lot of places event.target for the grid all are having the same problem. Did i accidentally delete any reference or you guys changed anything?
$("#gridProvidersWindow").on("click", ".checkbox", function (e) {
var checked = $(this).is(":checked");
var grid = $("#gridProvidersWindow").data("kendoGrid");
var model = grid.dataItem($(event.target).closest("tr"));
checkedProviderIds[model.Id] = checked;
});
5 Answers, 1 is accepted

This is the below error am getting. which was working perfectly fine couple of weeks back.

another place is :
$("#grid").on("click", "#serviceskendowindow", function(){
$("#servicewindow").data("kendoWindow").center().open();
var grid = $("#grid").data("kendoGrid");
var row= grid.dataItem($(event.target).closest(".k-detail-row").prev(".k-master-row"));
addSelectedContractorService = row.Id;
$('#gridServicesWindow').data().kendoGrid.dataSource.read();
});
We haven't change anything that would cause a problem with the dataItem method. The problem could be caused by using the window.event field. Could you try getting the element from the context or from the event argument:
$(
"#gridProvidersWindow"
).on(
"click"
,
".checkbox"
,
function
(e) {
var
checked = $(
this
).is(
":checked"
);
var
grid = $(
"#gridProvidersWindow"
).data(
"kendoGrid"
);
var
model = grid.dataItem($(
this
).closest(
"tr"
));
checkedProviderIds[model.Id] = checked;
});
$(
"#gridProvidersWindow"
).on(
"click"
,
".checkbox"
,
function
(e) {
var
checked = $(
this
).is(
":checked"
);
var
grid = $(
"#gridProvidersWindow"
).data(
"kendoGrid"
);
var
model = grid.dataItem($(e.target).closest(
"tr"
));
checkedProviderIds[model.Id] = checked;
});
Regards,
Daniel
Telerik

Hi Daniel,
Thanks for the reply. Sorry for the late reply, I have been working on some other issues.
event.target was working fine couple of weeks back , but suddenly it is throwing error, saying event is not found. I have changed all the places to e.currenttarget and it fixed the issue. But at one place i dont have e.
My parent grid
<
div
class
=
"container-fluid"
>
<
div
class
=
"row"
>
<
div
class
=
"col-xs-18 col-md-12"
>
@(Html.Kendo().Grid<
BHEBS.Areas.Admin.Models.ContractModel.providers
>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Filterable(false).Width(50);
columns.Bound(p => p.ContractorType);
columns.Bound(p => p.BHSISNum);
columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ContractorIsAlsoRegion);
columns.Bound(p => p.ContractorName);
columns.Bound(p => p.AddressBkNum);
columns.Command(command => command.Custom("Remove").Text("Delete").SendDataKeys(true).Click("deleteClick"));
}) .Events(e => e.DataBound("onDataBound"))
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Selectable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))
) )
</
div
>
</
div
>
</
div
>
My child Grid/detail template
<
script
id
=
"template"
type
=
"text/kendo-tmpl"
>
@(Html.Kendo().Grid<
BHEBS.Areas.Admin.Models.ContractModel.serviceDetails
>()
.Name("grid_#=Id#")
.Columns(columns =>
{
columns.Bound(o => o.Id).Width(50);
columns.Bound(o => o.ServiceId);
columns.Bound(o => o.ServiceType);
columns.Bound(o => o.AdultChild);
columns.Bound(o => o.Qualifier);
columns.Bound(o => o.CodeModifier);
columns.Bound(o => o.ServiceModifier);
columns.Bound(o => o.StartDate).Format("{0:MM/dd/yyyy}");
columns.Bound(o => o.EndDate).Format("{0:MM/dd/yyyy}");
columns.Command(command => command.Custom("Delete").SendDataKeys(true).Click("deleteClickServices"));
}) .ToolBar(toolbar =>
{
toolbar.Template(@<
text
>
<
div
class
=
"toolbar"
>
<
button
class
=
"k-button k-button-icontext k-grid-add k-primary"
id
=
"serviceskendowindow"
>Add Services</
button
>
</
div
>
</
text
>);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#", contractId = ViewBag.ContractService.Id }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</
script
>
Window on click of button on child grid
@(Html.Kendo().Window()
.Name("servicewindow")
.Title("Add Services")
.Content(@<
text
><
div
class
=
"container-fluid"
>
<
div
class
=
"row"
>
<
div
class
=
"col-xs-18 col-md-12"
>
@(Html.Kendo().Grid<
BHEBS.Areas.Admin.Models.ContractModel.serviceDetails
>()
.Name("gridServicesWindow")
.Columns(columns =>
{
columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<
input
type
=
'checkbox'
class
=
'checkbox'
id
=
'chkBoxServices'
/>");
columns.Bound(p => p.Id).Filterable(false).Width(50);
columns.Bound(p => p.ServiceId);
columns.Bound(p => p.ServiceType);
columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.AdultChild);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.AutoBind(false)
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.HtmlAttributes(new { style = "height:350px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetAllServices_Read", "Contract").Data("additionalInfoAddServices"))
)
)
<
button
class
=
"k-button close-buttonservices k-primary"
style
=
"bottom: 10px; "
>Cancel</
button
>
<
button
class
=
"k-button k-primary"
id
=
"addSelectedServices"
style
=
"bottom: 10px; "
>Add</
button
>
</
div
>
</
div
>
</
div
></
text
>
)
.Draggable()
.Resizable()
.Width(800)
.Modal(true)
.Visible(false)
)
function additionalInfoAddServices(){
var contractId =@Html.Raw(Json.Encode(ViewBag.ContractService.Id));
var grid = $("#grid").data("kendoGrid");
var row= grid.dataItem($(this).closest(".k-detail-row").prev(".k-master-row"));
if(Object.keys(row).length===0){
return {
Id: contractId,
contractorId : 0
}
}
else{
return {
Id: contractId,
contractorId : row.Id
}
}
}
I window is showing up, but when trying to read action method,which is looking for additional parameter where i am sending my parent id, it is throwing error, saying couldn't find the event. I tried giving this, but i am getting null .
You can check in the below thread, I have posted couple of months back for how to approach and one of your team member replied
var row = grid.dataItem($(event.target).closest(".k-detail-row").prev(".k-master-row"));
It was working perfectly fine, but suddenly after some weeks it started throwing error. That is the reason i asked if something changed from your side.
http://www.telerik.com/forums/button-click-on-detail-template-is-not-firing-(button-on-child-grid-in-hierarchical-grid)​
The approach will not work here because the request data function is not an element event handler. The simplest option to get the parent item ID value is to use a template expression e.g.
.Read(read => read.Action(
"GetAllServices_Read"
,
"Contract"
).Data(
"function() {return additionalInfoAddServices('#=Id#');}"
))
function
additionalInfoAddServices(Id) {
...
}
If you need to get the entire item then you could use the parent uid field:
.Read(read => read.Action(
"GetAllServices_Read"
,
"Contract"
).Data(
"function() {return additionalInfoAddServices('#=uid#');}"
))
function
additionalInfoAddServices(uid) {
var
grid = $(
"#grid"
).data(
"kendoGrid"
);
var
row = grid.dataSource.getByUid(parentUid);
...
}
Regards,
Daniel
Telerik