Hi,
I am trying to add a row to my grid but it isn't happening. I keep getting this error:
Uncaught ReferenceError: FirstName is not defined
(anonymous function)
Widget.extend._rowsHtmlkendo.web.js:18870
Widget.extend.refreshkendo.web.js:19055
e.extend.proxy.gjquery.min.js:2
Class.extend.triggerkendo.web.js:133
Observable.extend._processkendo.web.js:5628
Observable.extend._changekendo.web.js:5584
e.extend.proxy.gjquery.min.js:2
Class.extend.triggerkendo.web.js:133
Observable.extend.splicekendo.web.js:3920
Observable.extend.insertkendo.web.js:5394
Observable.extend.addkendo.web.js:5377
(anonymous function)1:367
f.Callbacks.njquery.min.js:2
f.Callbacks.o.fireWithjquery.min.js:2
e.extend.readyjquery.min.js:2
c.addEventListener.B
I've traced it down to this annonymous function - rowTemplate
(function(data) {
var o,e=kendo.htmlEncode;with(data){o='<tr data-uid="'+(uid)+'"><td>'+(e(FirstName))+'</td><td>'+(e(LastName))+'</td></tr>';}return o;
})
Here's my html file...Looks like a scoping issue? I can't figure out why this is happening???
<html>
<head>
<script src="http://localhost:8000/kendo/js/jquery.min.js"></script>
<script src="http://localhost:8000/kendo/js/kendo.web.min.js"></script>
<link href="http://localhost:8000/kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://localhost:8000/kendo/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function(){
$("#grid").kendoGrid({
columns:[
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
}],
dataSource: {
data: [
{
FirstName: "Joe",
LastName: "Smith"
},
{
FirstName: "Jane",
LastName: "Smith"
}]
}
});
var grid = $("#grid").data("kendoGrid");
grid.dataSource.add([{
FirstName: "Bobby",
LastName: "Loo"
}]);
});
</script>
</body>
</html>