Click here to Skip to main content
14,669,305 members
Rate this:
Please Sign up or sign in to vote.
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 19:43pm
v2
Comments
Karthik_Mahalingam 29-Mar-16 0:09am
   
MVC ?

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Please read these

read an external local JSON file in Javascript[^]

Try like this using ajax request

$.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);
       }
   });
   

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100