im trying to fetch data from some localhost api and show it on a kendo grid, but nothing happens, dont know where is the mistake:
In Postman i get results from this localhost GET
Only error showed is cookied related
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/pako_deflate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
<div id="example">
<div id="grid"></div>
<script>
var inputLe = localStorage.getItem("storageLe");
$(document).ready(function () {
var gridDataSource = new kendo.data.DataSource({
transport: {
read:{
url: "localhost:3000/api/chirps",
dataType: "json",
type: "GET"
}
},
pageSize: 20,
serverFiltering : true,
filter : [
{field: "Legal_Entity", operator: "eq", value: "3800" },
]
});
$("#grid").kendoGrid({
datasourece: gridDataSource,
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "Inv_Number",
title: "Invoice Number"
}, {
field: "Inv_Date",
title: "Invoice Date"
}, {
field: "Vat_Amout",
title: "Vat Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment"
}, {
field: "Legal_Entity",
title: "Lega Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed"
}, {
field: "Stat",
title: "Status"
}
]
});
});
window.localStorage.removeItem("storageLe");
</script>
</div>
</body>
</html>1 Answer, 1 is accepted
Hi, Jorge,
Thank you for the provided code snippets.
There are a couple of things that I noticed at first glance.
First the dataType seems to be set to "jsonp", however the response looks like plain json, instead of a callback function.
The second thing is the name of the schema.data field:
schema:{
data: "d",If it is defined like above, then the response should look like this:
{"d": [{
"id": 512,
"Inv_Number": "00000",
"Inv_Date": "2000-05-01T03:00:00.000Z",
"Vat_Amout": -999.99,
"Net": 0,
"Category": "00",
"Commen": "Some comment",
"Legal_Entity": "1234",
"Quart": "2",
"Confirmed": 1,
"Stat": 1
}, {...}, {...}, {...}]
}If the response looks like this instead:
[{
"id": 512,
"Inv_Number": "00000",
"Inv_Date": "2000-05-01T03:00:00.000Z",
"Vat_Amout": -999.99,
"Net": 0,
"Category": "00",
"Commen": "Some comment",
"Legal_Entity": "1234",
"Quart": "2",
"Confirmed": 1,
"Stat": 1
}, {...}, {...}, {...}]Then you should remove the the schema.data from the configuration as it isn't needed.
I have prepared a dojo example using the sample data that you provided:
https://dojo.telerik.com/@gdenchev/IZoTaYeH
All of the other Grid configurations look good, changing the dataType to "json" and removing the data field should allow you to successfully bind to the data(provided that the response looks like the second example).
As a side note, the request should work properly even if you skip all of the other configurations as the default settings are the same:
transport: {
read: "localhost:3000/api/chirps"
}In case the problem continues to persist, could you take a screenshot of the returned server response with the data(also located in the Network tab)?
Best Regards,
Georgi Denchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Hi, Georgi thanks for your help.
Initially, I'm was using "JSON" as dataType, but I receive the error about cors. When I use dataType as "jsonp" the error doesn't show up, but the grid doesn't populate either.
When I use "jsonp" the request occurs return with a 200 status.
I changed many things in the code in the past few days trying to solve this problem. Let me send my updated code:
I changed the end of url (most because the name has nothing to do with my API) of my local API, but this doesn't seem to affect it at all, as we see in the postman return.
Thanks in advance for all your help.
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<link rel="stylesheet" href="styles/kendo.common.min.css">
<link rel="stylesheet" href="styles/kendo.default.min.css">
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
<link rel="stylesheet" href="styles/kendo.rtl.min.css">
<link rel="stylesheet" href="styles/kendo.silver.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/pako_deflate.min.js"></script>
<script src="js/jszip.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/daterangepicker.css">
</head>
<body>
<div class="a">
<p>
<h1>Some</h1>
</p>
</div>
<div id="container">
<div id="grid"></div>
<script>
var inputLe = localStorage.getItem("storageLe");
$(document).ready(function () {
var gridDataSource = new kendo.data.DataSource({
transport: {
read:{
url: "http://localhost:3000/api/reg",
dataType: "jsonp",
type: "GET",
}
},
schema:{
model:{
fields:{
//id: { type: "number" },
Inv_Number: { type: "string" },
Inv_Date: { type: "date" },
Vat_Amout: { type: "number" },
Net: { type: "number" },
Category: { type: "string" },
Commen: { type: "string" },
Legal_Entity: { type: "string" },
Quart: { type: "string" },
Confirmed: { type: "boolean" },
Stat: { type: "boolean" }
}
}
},
//serverFiltering : true,
//filter : [
// {field: "Legal_Entity", operator: "eq", value: "3800" },
//]
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 700,
editable: "incell",
groupable: true,
sortable: true,
toolbar: ["excel", "pdf", "search",{name:'new', text:'Create Comment', iconClass:"k-icon k-i-plus"}],
//dataBound: onDataBound,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "Inv_Number",
title: "Invoice Number"
}, {
field: "Inv_Date",
title: "Invoice Date",
format: "{0:dd/MM/yyyy}"
}, {
field: "Vat_Amout",
title: "Vat Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment",
width: 300
}, {
field: "Legal_Entity",
title: "Legal Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed",
//template: '<input type="checkbox" #= Confirmed ? "checked=checked" : "" # disabled="disabled"></input>'
//template: "<div align=center> <input name='Confirmed' align=center class='Confirmed' type='checkbox' data-bind='checked: Confirmed' #= Confirmed ? checked='checked' : '' #/> </div>"
}, {
field: "Stat",
title: "Status",
}
]
});
});
window.localStorage.removeItem("storageLe");
//edit to fetch in the comment drodown the categories
function clinetCategoryEditor(container, options) {
$('<input required name="Commen">')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
data: categories
}
});
}
//function that set the boolean status of Stat and show matched or unmatched with colors
function onDataBound(e){
var grid = this;
grid.table.find("tr").each(function(){
var dataItem = grid.dataItem(this);
var themeColor = dataItem.Stat ? 'success' : 'error';
var text = dataItem.Stat ? 'Matched' : 'Unmatched';
$(this).find(".badgeTemplate").kendoBadge({
themeColor: themeColor,
text: text,
});
});
}
</script>
<style>
div.a{
text-align: center;
}
</style>
</div>
</body>
</html>
Hi, Jorge,
The problem is that the response that you return from the server is in Json format, not Jsonp, the Grid cannot bind to the Json data if the format is incorrect.
You need to either return the data in the appropriate format, or configure the server to allow CORS so you wouldn't have problems with regular Json.
Jsonp request example:
Response example:
In other words the server needs to return the result in the following format:
jQuery112...([{Item1}, {Item2}, {Item3}...])Where jQuery112 is the name of the callback function that the DataSource sent.
Some resources that you might find helpful:
https://www.htmlgoodies.com/javascript/learn-how-to-use-the-jsonp-data-format-with-jquery/
https://stackoverflow.com/questions/3839966/can-anyone-explain-what-jsonp-is-in-layman-terms
https://stackoverflow.com/questions/2067472/what-is-jsonp-and-why-was-it-created
Rank 1
In addition I fixed a typo on the "dataSource" on the kendo grid fuction, i also remove the server filtering and add a schema but the grid doesnt populate...
Here some example of the return i get from the API:
{"id": 512,
"Inv_Number": "00000",
"Inv_Date": "2000-05-01T03:00:00.000Z",
"Vat_Amout": -999.99,
"Net": 0,
"Category": "00",
"Commen": "Some comment",
"Legal_Entity": "1234",
"Quart": "2",
"Confirmed": 1,
"Stat": 1
}