Hi All,
I have this code for binding kendo json data to kendo grid but its not working. Please help me out. Here is the code that I was working with.
//inside HtmlPage1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<script>
$(function () {
//calling the kendogrid function
$("#grid").kendoGrid({ //using kendo ui javascript api to get column names
columns: [{ title: "First Name", field: "firstname", template: "
#= firstname #
" },//title for column header, setting template for firstname
{ title: "Last Name", field: "lastname", template: "
#= lastname #
" },
{ title: "Picture", field: "picture", template: "<img src='#=picture #' height='100' width='150'/>" },//specifying template for picture column
{ title: "Email", field: "email", template: "
#=email#" }
],
dataSource: {
//data: people, //not using the local javascript array as data as above but from json
transport:
{
read:
{
url: "data/people.json"
}
},
schema:
{
data: "data",
total: "count"
},
pageSize: 3
},
height: 400,
scrollable: true,
pageable: true,
sortable: true,
groupable: true
});
});
</script>
</body>
</html>
//inside data/people.json
[
{
"firstname": "Todd",
"lastname": "Anglin",
"picture": "images/todd.jpg",
"email": "todd.anglin@gmail.com"
},
{
"firstname": "Ronn",
"lastname": "Jobs",
"picture": "images/ronn.jpg",
"email": "ronn.jobs@hotmail.com"
},
{
"firstname": "Malisa",
"lastname": "Hanks",
"picture": "images/malisa.jpg",
"email": "mali.hanks@yahoo.com"
},
{
"firstname": "Torey",
"lastname": "Wilson",
"picture": "images/torey.jpg",
"email": "torey@gmail.com"
}
]
I get 404 error that json file could not be loaded.
Thanks
What I have tried:
$("#grid").kendoGrid({ //using kendo ui javascript api to get column names
columns: [{ title: "First Name", field: "firstname", template: "
#= firstname #
" },//title for column header, setting template for firstname
{ title: "Last Name", field: "lastname", template: "
#= lastname #
" },
{ title: "Picture", field: "picture", template: "<img src='#=picture #' height='100' width='150'/>" },//specifying template for picture column
{ title: "Email", field: "email", template: "
#=email#" }
],
dataSource: {
//data: people, //not using the local javascript array as data as above but from json
transport:
{
read:
{
//url: "data/people.json"
url:"people.json"
}
},
schema:
{
data: "data",
total: "count"
},
pageSize: 3
},
height: 400,
scrollable: true,
pageable: true,
sortable: true,
groupable: true
});