Question

我有Kendo网格，它从我的对象数组加载数据。它加载加载很好，直到我添加一些修改，购买添加一个按钮，目标是单击网格中每行的按钮，模型弹出窗口必须打开。

我已按照此Example进行修改。所有我想要的是能够从按钮点击并且模型打开但现在网格没有显示因为这个错误是猜测“Uncaught TypeError：无法读取未定义的属性'tbody'，这是我在控制台上找到的。” / p>

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

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

第二：FirstName：{editable：false}是无效的dataSource初始化代码......我想你要做的是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错误的情况下启动并运行网格......但是您仍然需要修复配置的其余部分和列/行模板（这是另一个问题）。

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

1 个答案: