Je suis nouveau dans l'utilisation de Kendo Grid et Kendo UI. Ma question est comment puis-je résoudre cette erreur
Uncaught TypeError: Cannot read property 'replace' of undefined
Ceci est mon code sur mon 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())
});
Ligne qui provoque l'erreur
rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),
HTML de rowTemplate
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr class='k-alt'>
<td>
${ FirstName } ${ LastName }
</td>
</tr>
</script>
Je pense que jQuery ne peut pas trouver l'élément.
Tout d'abord trouver l'élément
var rowTemplate= document.getElementsByName("rowTemplate");
ou
var rowTemplate = document.getElementById("rowTemplate");
ou
var rowTemplate = $('#rowTemplate');
Puis essayez à nouveau votre code
rowTemplate.html().replace(....)
Cela pourrait être dû à la propriété pageable -> pageSizes: true
.
Supprimez cela et vérifiez à nouveau.
Veuillez essayer avec l'extrait de code ci-dessous.
<!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>
J'ai mis en œuvre la même chose d'une manière différente.
Dans mon cas, j’utilisais une vue que j’ai convertie en vue partielle et j’ai oublié de supprimer le modèle de "scripts de section". Supprimer le bloc de section a résolu mon problème. En effet, les sections ne sont pas rendues en vues partielles.
Il est important de définir un identifiant dans le modèle
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.id))
)