Click here to Skip to main content
15,849,406 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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
});
Posted
Updated 28-Mar-16 20:43pm
v2
Comments
Karthik_Mahalingam 29-Mar-16 0:09am    
MVC ?

1 solution

Please read these

read an external local JSON file in Javascript[^]

Try like this using ajax request

JavaScript
$.ajax({
       type: "POST",
       url: link, // url of your action
       data: args, // parameters if available
       dataType: "json",
       success: function (result) {

           var grid = $("#KendoGridId").data("kendoGrid");
           var dataSource = new kendo.data.DataSource({ data: result  });
           grid.setDataSource(dataSource);
           grid.dataSource.read();


       },
       error: function (httpRequest, textStatus, errorThrown) {
           alert("Error: " + textStatus + " " + errorThrown + " " + httpRequest);
       }
   });
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900