我是使用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>
答案 0 :(得分:22)
我认为jQuery无法找到该元素。
首先找到元素
var rowTemplate= document.getElementsByName("rowTemplate");
或
var rowTemplate = document.getElementById("rowTemplate");
或
var rowTemplate = $('#rowTemplate');
然后再次尝试您的代码
rowTemplate.html().replace(....)
答案 1 :(得分:2)
可能是因为属性pageable -> pageSizes: true
。
删除它并再次检查。
答案 2 :(得分:1)
请尝试使用以下代码段。
<!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>
我用不同的方式实现了同样的事情。
答案 3 :(得分:0)
在我的情况下,我使用的视图已转换为部分视图,我忘记从“@section脚本”中删除模板。删除部分块,解决了我的问题。这是因为这些部分没有在部分视图中呈现。
答案 4 :(得分:0)
在模型中定义ID非常重要
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.id))
)