This is a migrated thread and some comments may be shown as answers.

Adding to kendogrid datasource causes "is not defined" error

1 Answer 1045 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joseph
Top achievements
Rank 1
Joseph asked on 12 May 2012, 07:39 AM
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>

1 Answer, 1 is accepted

Sort by
0
Joseph
Top achievements
Rank 1
answered on 14 May 2012, 11:04 AM
OK, figured it out. Was because of an incorrect argument to the datasource.add method

This works now:

grid.dataSource.add({
        FirstName: "Bobby",
        LastName: "Loo"     
    });
Tags
Grid
Asked by
Joseph
Top achievements
Rank 1
Answers by
Joseph
Top achievements
Rank 1
Share this question
or