Kendo UI Grid not pulling in local data

Question

I cannot seem to get the local data (var people) to render in the below kendo grid. Without the people array and the dataSource attribute the columns data renders fine. So not sure where the error is.

<!doctype html>
<head>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>

</head>
<body>
<div id="grid">
</div>
<script>
$(function(){
    $("#grid").kendoGrid({

        var people = [{patientName: "John Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" }];

                columns: [{title: "Patient Name"},
                    {title: "MRN"},
                    {title: "Account#"},
                    {title: "Date of Birth"}, 
                    {title: "Room"}, 
                    {title: "Bed"}, 
                    {title: "Admit Date"}],

                    dataSource: {
            data:people
        }                   
    });
});
</script>
</body>
</html>

Burke Holland Burke Holland · Accepted Answer · 2013-02-05T22:45:47

There's a few things that I see...

The people array is inside the grid initialization code

You didn't specify fields with your columns.

$(function(){

   var people = [{patientName: "John Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" }];


   $("#grid").kendoGrid({
     columns: [{field: "patientName", title: "Patient Name"},
               {field: "MRN", title: "MRN"},
               {field: "account", title: "Account#"},
               {field: "dateOfBirth", title: "Date of Birth"}, 
               {field: "room", title: "Room"},
               {field: "bed", title: "Bed"},
               {field: "admitDate", title: "Admit Date" }],
     dataSource: {
       data:people
     }                   
  });

});

Working sample: http://jsbin.com/uxaqus/1

Kendo UI Grid not pulling in local data

1 Answers