I'm new in using Kendo Grid and Kendo UI . My question is how can i resolve this Error
Uncaught TypeError: Cannot read property 'replace' of undefined This is my Code on my 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()) }); Line that Causes the Error
rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')), HTML of rowTemplate
<script type="text/x-kendo-tmpl"> <tr class='k-alt'> <td> ${ FirstName } ${ LastName } </td> </tr> </script> 5 Answers
I think jQuery cannot find the element.
First of all find the element
var rowTemplate= document.getElementsByName("rowTemplate"); or
var rowTemplate = document.getElementById("rowTemplate"); or
var rowTemplate = $('#rowTemplate'); Then try your code again
rowTemplate.html().replace(....) It could be because of the property pageable -> pageSizes: true.
Remove this and check again.
Please try with the below code snippet.
<!DOCTYPE html> <html> <head> <title>Test</title> <link href="" rel="stylesheet" /> <link href="" rel="stylesheet" /> <script src=""></script> <script src=""></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: "" }, 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> </div> </body> </html> I have implemented same thing with different way.
In my case, I was using a View that I´ve converted to partial view and I forgot to remove the template from "@section scripts". Removing the section block, solved my problem. This is because the sections aren´t rendered in partial views.
It is important to define an id in the model
.DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Model(model => model.Id(p => p.id)) ) 
