Is this a Kendo Ui Grid bug?

Question

So I created Grid using Kendo Ui, and within this grid I have a detail row template. I create the main grid like this

 $(document).ready(function() {
    var theModel = @(Html.Raw(Json.Encode(Model.Datas)));
   //If the model is empty then create the No data Grid
   if (theModel.length < 1) {
       $("#AccessGrid").kendoGrid({
           columns:[
               {
                   field: "Message",
                   title: " "
               }
               ],              
           dataSource: [{Message:"No data"}]
       });
   } else {//create the normal grid
         $("#AccessGrid").kendoGrid({
        columns:[
            {
                field: "ProjNo",
                title: "Project #"
            }, 
            {
                field: "ProjType",
                title: "Job Type"
            },
            {
                field: "ProjAddress",
                title: "Address"
            }],
        selectable:true,
        scrollable:false,
        dataSource:theModel,
        detailTemplate:  kendo.template($("#AcccessDetailTemplate").html()),
        detailInit:initDetailGrid
    });
   }

});

and initDetailGrid(e) is used to create the detail grid

function initDetailGrid(e) {

    var grid = e.sender;

    var currentDataItem = grid.dataItem(grid.select()); //Get the data for the selected row
    //if there are no data in intExtData then create a default obj

    if (currentDataItem.InternalData == null||currentDataItem.InternalData == undefined||currentDataItem.InternalData.length < 1 ) {           
            currentDataItem.InternalData = [{          
                TaskId:-1,
                Internal: -1,
                Sequence: -1
        }]; 
    }

    e.detailRow.find("[name='AcccessDetail']").kendoGrid({
        columns:[
           {
            field:"TaskId",
            title: "<input type='checkbox' onclick='AccessModal.checkAll(event)'/>",
            template:$("#detailInputColumnTemplate").html(),
            width: "35px"
        },
        {
            field: "Internal",
            title: " ",
            template:$("#detailColumnTemplate").html()            
        }
        ],
        scrollable:false,
        dataSource:currentDataItem.InternalData
    });      
}

The problem is that sometimes my detail template is not shown for one or more rows and an error is thrown saying Uncaught TypeError: Cannot read property 'InternalData' of null, but how can that be? I know that there are data there, because if I refresh and click on the row detail the data shows up. This does not happen all the time , but it happens enough for me to notice. Has anyone encounter something like this before

Answer 1

When you click a detail button, grid must select row which include that button, but if you move your mouse, when still clicked, grid don't select any row. So var currentDataItem = grid.dataItem(grid.select()); gives error because of grid.select(). And in my opinion, yes it is a bug.Especially try on chrome.hold clicking detail button,move your mouse 3 or 4 px left or right, then lift mouse.

By the way if you have only one grid you can change selectable property as false and get clicked dataItem by var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

But if you have two grid and second one binding or filtering according to selected row of first grid you must use a try catch at javascript and roll back everything.

For exp:

try
{
    var grid = $("#donemGrid").data("kendoGrid");
    var rows = grid.select();    
    var DonemId= grid.dataItem(rows).DonemId;
    var data = grid.data("kendoGrid");
    data.dataSource.filter({ field: "DonemId", operator: "eq", value: parseInt(DonemId)
}
catch{
    //set every thing like in time before clicked
}

Answer 2

This is not a bug. You should not be relying on the selected row to get the data for your detail row. The detailInit event provides direct access to the row data in the data field of the event object passed to the handler.

Try this:

function initDetailGrid(e) {
    var grid = e.sender,
        dataItem = e.data;

    if (!dataItem.InternalData || dataItem.InternalData.length === 0 ) {
        // ...
    }

    // ...
}

I hope that helps!