Uncaught TypeError：未定義のプロパティ 'tbody'を読み取ることができません

Question

私のオブジェクト配列からデータをロードする剣道グリッドがあります。私はいくつかの変更を加えるまで、ローディングをうまく行っていました。グリッド内の各行のボタンをクリックし、モデルポップアップを開く必要があるボタンを内側に追加して購入してください。

私はこれに続いてExampleを修正しました。私が欲しかったのは、ボタンからクリックしてモデルを開くことでしたが、今グリッドはこのエラーのbeacuseを推測していません "Uncaught 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> 

グリッド

それはjQueryのセレクタの内側にある...

<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

最初の問題は、あなたが自己実行中の関数の内部グリッドの初期化を持って思いということですが、そうではありませんこれは内部のコードが決して実行されないことを意味し、したがってtbodyにアクセスしようとすると、初期化コードが一度も実行されなかったため、グリッドは存在しません。

だから、あなたはこれに

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

を変更する必要があります。

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

第二：姓：{編集可能な値：false}は、有効なデータソースの初期化コードではありません...私はあなたが何であるかと思いますしようとすると、datasource.schema.modelの設定（http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.model）です。

第3：「pagebale」は有効な構成オプションではありません（ただし、害はありません）。

第4：ボタンを表示する列テンプレートとボタンを表示する行テンプレートの両方を使用しようとしていますが、行テンプレートはデータと一致しません。ここで

はjqueryのセレクタ対自己実行機能に関する私の最初のポイントを固定デモです：http://dojo.telerik.com/@Stephen/ULEhA

これは、あなたがTBODYエラーなしであなたのグリッドの稼働を取得することができます...しかし、あなたはまだする必要があり残りの構成と列/行テンプレートを修正してください（これは他のすべての問題です）。