这是 Kendo Ui Grid 的错误吗？答案

【问题标题】：Is this a Kendo Ui Grid bug?这是 Kendo Ui Grid 的错误吗？
【发布时间】：2014-02-26 23:47:09
【问题描述】：

所以我使用 Kendo Ui 创建了网格，在这个网格中我有一个详细信息行模板。我像这样创建主网格

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

});

而initDetailGrid(e) 用于创建细节网格

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

问题是，有时我的详细信息模板没有显示为一行或多行，并且抛出了一个错误，说Uncaught TypeError: Cannot read property 'InternalData' of null，但这怎么可能呢？我知道那里有数据，因为如果我刷新并单击行详细信息，数据就会显示出来。这不会一直发生，但它足以让我注意到。有没有人遇到过这种情况

【问题讨论】：

当您单击详细信息按钮时，网格必须选择包含该按钮的行，但如果您移动鼠标，仍然单击时，网格不会选择任何行。所以var currentDataItem = grid.dataItem(grid.select()); 因为grid.select() 给出了错误。在我看来，是的，这是一个错误。
特别是在 chrome 上尝试。按住单击详细信息按钮，向左或向右移动鼠标 3 或 4 px，然后抬起鼠标。
感谢您帮助我学习如何重新创建它。也许你可以把它写下来作为答案，我会接受。

标签： javascript jquery asp.net-mvc kendo-ui kendo-grid

【解决方案1】：

这不是错误。您不应依赖所选行来获取详细信息行的数据。 detailInit 事件提供对传递给处理程序的事件对象的 data 字段中的行数据的直接访问。

试试这个：

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

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

    // ...
}

希望对你有帮助！

【讨论】：

在我的网格中的某些行上，caaling detailInit(e) e 未定义...您有什么解决方法的想法吗？

【解决方案2】：

当您单击详细信息按钮时，网格必须选择包含该按钮的行，但是如果您移动鼠标，当仍然单击时，网格不会选择任何行。所以 var currentDataItem = grid.dataItem(grid.select()); 由于grid.select() 而给出错误。在我看来，是的，这是一个错误。特别是尝试 chrome。按住单击详细信息按钮，向左或向右移动鼠标 3 或 4 px，然后抬起鼠标。

顺便说一句，如果您只有一个网格，您可以将可选属性更改为 false 并通过var dataItem = this.dataItem($(e.currentTarget).closest("tr")); 获取点击的 dataItem

但是，如果您有两个网格和第二个网格，则根据第一个网格的选定行进行绑定或过滤，您必须在 javascript 中使用 try catch 并回滚所有内容。

对于经验：

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
}

【讨论】：