未捕获的类型错误：无法读取网格中未定义的属性“替换”答案

【问题标题】：Uncaught TypeError : cannot read property 'replace' of undefined In Grid未捕获的类型错误：无法读取网格中未定义的属性“替换”
【发布时间】：2014-06-14 19:03:53
【问题描述】：

我是使用 Kendo Grid 和 Kendo UI 的新手。我的问题是如何解决这个错误

Uncaught TypeError: Cannot read property 'replace' of undefined

这是我在 KendoGrid 上的代码

$("#Grid").kendoGrid({
            scrollable: false,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true
            },
            dataSource: {
                transport: {
                    read: {
                        url: '/Info/InfoList?search=' + search,
                        dataType: "json",
                        type: "POST"
                    }

                },
                pageSize: 10
            },
            rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),
            altRowTemplate: kendo.template($("#rowTemplate").html())
        });

导致错误的行

rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),

rowTemplate 的 HTML

 <script id="rowTemplate" type="text/x-kendo-tmpl">   
        <tr class='k-alt'>
            <td>
                ${ FirstName } ${ LastName }
            </td>
        </tr>
            </script>

【问题讨论】：

我能看到的唯一原因是jQuery无法找到ID为rowTemplate的元素...你能记录$("#rowTemplate").length的值并查看返回的内容吗
@ArunPJohny 它返回 0
这就是原因...您的页面中没有 ID 为 rowTemplate 的元素

标签： javascript jquery kendo-ui telerik kendo-grid

【解决方案1】：

我认为 jQuery 找不到该元素。

首先找到元素

var rowTemplate= document.getElementsByName("rowTemplate");

或

var rowTemplate = document.getElementById("rowTemplate");

或

var rowTemplate = $('#rowTemplate');

然后再次尝试您的代码

rowTemplate.html().replace(....)

【讨论】：

【解决方案2】：

这可能是因为pageable -> pageSizes: true 属性。

删除它并再次检查。

【讨论】：

【解决方案3】：

请尝试以下代码 sn-p。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
    <script>
        function onDataBound(e) {
            var grid = $("#grid").data("kendoGrid");
            $(grid.tbody).find('tr').removeClass('k-alt');
        }

        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                Freight: { type: "number" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShipCity: { type: "string" }
                            }
                        }
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },
                height: 430,
                filterable: true,
                dataBound: onDataBound,
                sortable: true,
                pageable: true,
                columns: [{
                    field: "OrderID",
                    filterable: false
                },
                            "Freight",
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                width: 120,
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "ShipName",
                                title: "Ship Name",
                                width: 260
                            }, {
                                field: "ShipCity",
                                title: "Ship City",
                                width: 150
                            }
                        ]
            });
        });
    </script>
</head>
<body>
    <div id="grid">
    </div>
</body>
</html>

我用不同的方式实现了同样的东西。

【讨论】：

【解决方案4】：

就我而言，我使用的是已转换为局部视图的视图，但我忘记从“@section 脚本”中删除模板。删除部分块，解决了我的问题。这是因为这些部分不会在局部视图中呈现。

【讨论】：

【解决方案5】：

在模型中定义一个id很重要

.DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Model(model => model.Id(p => p.id))
    )

【讨论】：

请只用英文，不要添加其他语言的翻译。