This is a migrated thread and some comments may be shown as answers.

selecting the closes row in the grid

5 Answers 2026 Views
Grid
This is a migrated thread and some comments may be shown as answers.
DHHS
Top achievements
Rank 1
DHHS asked on 08 Jul 2015, 09:09 PM

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

Sort by
0
DHHS
Top achievements
Rank 1
answered on 08 Jul 2015, 09:17 PM

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

0
DHHS
Top achievements
Rank 1
answered on 08 Jul 2015, 09:37 PM

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

0
Daniel
Telerik team
answered on 10 Jul 2015, 01:49 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
DHHS
Top achievements
Rank 1
answered on 16 Jul 2015, 06:34 PM

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)‚Äč

0
Daniel
Telerik team
answered on 20 Jul 2015, 01:21 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
DHHS
Top achievements
Rank 1
Answers by
DHHS
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or