Uncaught TypeError: Cannot read property 'tbody' of undefined

Question

我有 Kendo 网格，它从我的对象数组加载数据。在我对其进行一些修改之前，它一直在加载加载，购买时在其中添加一个按钮，目的是单击网格中每一行中的按钮，并且必须打开模型弹出窗口。

我已经按照这个Example修改了。我想要的只是能够单击按钮并打开模型，但现在网格没有显示，因为这个错误是我在控制台上找到的猜测 "Uncaught TypeError: Cannot read property 'tbody' of undefined"。

如何通过单击网格上的按钮打开模型弹出窗口？

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>

Kendo 模板

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

其次：FirstName: { editable: false } 不是有效的数据源初始化代码...我想你要做的是 datasource.schema.model 配置 (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.model).

第三："pagebale"不是一个有效的配置选项（但它不会造成伤害）。

第四：您尝试同时使用列模板显示按钮和行模板显示按钮，但行模板与您的数据不匹配。

这是一个演示，修复了我关于自执行函数与 jquery 选择器的第一点：http://dojo.telerik.com/@Stephen/ULEhA

这允许您在没有 tbody 错误的情况下启动和运行ning 网格...但是您仍然需要修复其余的配置和 column/row 模板（这是一个整个其他问题）。

Uncaught TypeError: Cannot read property 'tbody' of undefined

Uncaught TypeError: Cannot read property 'tbody' of undefined

jquery

asp.net-mvc

kendo-ui

popupwindow