selecting the closes row in the grid

[DHHS]

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;
});

[DHHS]

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

[DHHS]

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();
});

[Daniel]

Hello,

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

 

 

[DHHS]

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)​

[Daniel]

Hi,

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