title: Uncaught TypeError: Cannot read property 'tbody' of undefined
body: <p>I have Kendo grid which load the data from my object array. It was loading loading fine up until i add some modifications on it, buy adding a button inside with a goal of clicking the button in each row in the grid and the model popup must open.</p>
  
  <p>I have followed this <a href="http://jsbin.com/awiron/2/edit?html,js,output" rel="nofollow noreferrer">Example</a> to modify it. All i wanted was to be able to click from the button and the model opens up but now the grid is not showing beacuse of this error is guess "Uncaught TypeError: Cannot read property 'tbody' of undefined" which i found on console.</p>
  
  <p>How can i get the model popup to open from button click on the grid?</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(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: '&lt;input type="button" class="info  k-button k-button-icontext" name="info" value="Info"  style="height: 26px; margin: 0px 2px; min-width: 64px;" /&gt;' },
                      { 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 () {
              $('&lt;div id="info_win"&gt;Some content here&lt;/div&gt;').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();
          });
          });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>View model that i want to display on button click from the grid</strong></p>
  
  <p>
          </p>
  
  <pre><code>        &lt;div class="form-group form-horizontal custom-form"&gt;
              &lt;label id="txtDate"&gt; Date:&lt;/label&gt;
              &lt;div id="calendar2" class="input-group"&gt;
                  &lt;div class="input-group-addon"&gt;
                      &lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
                  &lt;/div&gt;
                  &lt;input type="date" class="form-control pull-right" id="txtDate"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Grid</strong></p>
  
  <pre><code> &lt;div id="grid"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Kendo Template</p>
  
  <pre><code>&lt;script type="text/x-kendo-template" id="rowTemp"&gt;
  
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td align="center"&gt;&lt;input type="button" class="info  k-button k-button-icontext" name="info" value="Info"  style="height: 26px; margin: 0px 2px; min-width: 64px;" /&gt;&lt;/td&gt;
  
      &lt;/tr&gt;
  &lt;/script&gt;
  </code></pre>