Uncaught TypeError：无法读取未定义的属性'tbody'

Question

我有加载我的对象数组中的数据的Kendo网格。这是加载加载罚款，直到我添加一些修改，购买添加一个按钮里面的每个行中点击按钮的目标和模型弹出窗口必须打开。

我按照此Example来修改它。我想要的只是能够点击按钮和模型打开，但现在网格不显示这个错误的原因是猜测“未捕获TypeError：无法读取属性'tbody'的未定义”，我在控制台上发现。

我怎样才能得到模型弹出窗口打开从按钮点击网格？

的Javascript

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(function() { 
      //array objects which will add the data to the table 
      var People = [{ firstName: "E", lastName: "Es" }, { firstName: "Ray", lastName: "Rs" }, 
          { firstName: "J", lastName: "Js" }, { firstName: "RR", lastName: "ESW" }, 
          { firstName: "G", lastName: "Gp" }, { firstName: "DS", lastName: "JN" },, 
          { firstName: "ZKZG", lastName: "RD" }, { firstName: "JJJ", lastName: "FGJHGH" }]; 

      //Creating my kendo grid 
      $("#grid").kendoGrid({ 

       //now am specifying the data or binding the data to the datasource 
       dataSource: { 
        data: People, 
        FirstName: { editable: false } 
       }, 
       pageable: { pageSize: 10, buttonCount: 5 }, 
       height: 400, 
       resizable: true, 
       columnMenu: true, 
       scrollable: true, 
       pagebale: true, 
       sortable: { mode: "multiple" }, 

       columns: [ 

        { template: '<input type="button" class="info k-button k-button-icontext" name="info" value="Info" style="height: 26px; margin: 0px 2px; min-width: 64px;" />' }, 
        { title: "First Name", field: "firstName" }, 
        { title: "Last Name", field: "lastName" }, 
        { title: "Surname", field: "firstName" }, 
        { title: "Province", field: "firstName" }, 
        { title: "City", field: "firstName" }, 
        { title: "Last Name", field: "lastName" }], 

        rowTemplate: kendo.template($("#rowTemp").html()) 
      }) 
     }); 

     //Kendo model her 
     $('#grid').data('kendoGrid').tbody.find('.info').click(function() { 
      $('<div id="info_win">Some content here</div>').appendTo(document.body); // it is showing the error her 
      $("#info_win").kendoWindow({ 
       title: "Edit roles here", 
       modal: false, 
       resizable: true, 
       visible: false, 
       width: 300 
      }).data("kendoWindow").center().open(); 
     }); 
     }); 
</script> 

，我想从格上单击按钮显示

视图模型

 <div class="form-group form-horizontal custom-form"> 
      <label id="txtDate"> Date:</label> 
      <div id="calendar2" class="input-group"> 
       <div class="input-group-addon"> 
        <i class="fa fa-calendar"></i> 
       </div> 
       <input type="date" class="form-control pull-right" id="txtDate"> 
      </div> 
     </div> 
     </div> 
    </div> 

电网

<div id="grid"></div> 

剑道模板

<script type="text/x-kendo-template" id="rowTemp"> 

    <tr> 
     <td></td> 
     <td></td> 
     <td align="center"><input type="button" class="info k-button k-button-icontext" name="info" value="Info" style="height: 26px; margin: 0px 2px; min-width: 64px;" /></td> 

    </tr> 
</script> 

Answer 1

第一个问题是，你认为你有一个自动执行的函数内部网格初始化，但它不是......它是一个jQuery选择内，这意味着它内部的代码永远不会执行，因此当你尝试访问tbody时，网格不存在，因为初始化代码从未运行过。

所以，你需要改变

$(function() { 
    // grid initialization 
}); 

要这样：

(function() { 
    // grid initialization 
})(); 

二：姓：{编辑：假}不是有效的数据源的初始化代码...我认为你是什么试图做的是datasource.schema.model配置（http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.model）。

第三：“pagebale”不是有效的配置选项（但它不会造成任何伤害）。

第四种：您正尝试使用列模板来显示按钮，并且行模板显示按钮，但行模板与您的数据不匹配。

这里是一个演示固定我的关于自执行功能VS jQuery选择第一点：http://dojo.telerik.com/@Stephen/ULEhA

这可以让你得到你的Grid并没有TBODY错误运行...但你仍然需要修复其余的配置和列/行模板（这是一个完整的其他问题）。