Uncaught TypeError: Cannot read property 'tbody' of undefined

Question

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.

I have followed this Example 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.

How can i get the model popup to open from button click on the grid?

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>

View model that i want to display on button click from the grid

        <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>

Grid

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

Kendo Template

<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

The first problem is that you think you have your grid initialization inside a self-executing function, but it isn't...it is inside a jquery selector, which means the code inside it never executes and therefore when you try to access the tbody, the grid does not exist as the initialization code has never been run.

So, you need to change

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

To this:

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

Second: FirstName: { editable: false } is not valid dataSource initialization code...I think what you are trying to do is the datasource.schema.model configuration (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.model).

Third: "pagebale" is not a valid configuration option(but it is causing no harm).

Fourth: you are trying to use both a column template to show a button AND a row template show the button but the row template does not match your data.

Here is a demo fixing my first point regarding the self-executing function vs a jquery selector: http://dojo.telerik.com/@Stephen/ULEhA

This allows you to get your grid up and running without the tbody error...but you still need to fix the rest of your configuration and the column/row templates(which is a whole other issue).