Kendo grid doesnt populate from API request - javascript

I am using Kendo UI, specifically the kendo grid and the kendo dataSource.
I'm getting data from a local API. The data is retrieving correctly (checked in postman). I save (or tried to save) the result of this get result in a kendo dataSource.
Then I pass this dataSource as a parameter when creating the grid. Unfortunately, the grid doesn't show any result...
Here is the code:
<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:{
//data: "data",
model:{
// id: "id",
fields:{
id: { type: "number" },
Number: { type: "string" },
Date: { type: "date" },
Amout: { type: "number" },
Net: { type: "number" },
Category: { type: "string" },
Commen: { type: "string" },
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: "Number",
title: "Number"
}, {
field: "Date",
title: "Date",
format: "{0:dd/MM/yyyy}"
}, {
field: "Amout",
title: "Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment",
width: 300
}, {
field: "Entity",
title: "Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed",
}, {
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>
<!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>
<p>
<h1>Some</h1>
</p>
</div>
<div id="container">
<div id="grid"></div>
</div>
here is a sample json return from the API:
{
"id": 512,
"Number": "00000",
"Date": "2000-05-01T03:00:00.000Z",
"Amout": -999.99,
"Net": 0,
"Category": "00",
"Commen": "Some comment",
"Entity": "1234",
"Quart": "2",
"Confirmed": 1,
"Stat": 1
}
Thanks in advance.
Edit1: Put all the functions on the code snippet.
Edit2: print screen of the console and network tabs.
Edit3: new print screen usins json instead of jsonp (CORS error)

Here's an example of a grid populated with data based on your example. As per my comment "did you try data:[...]", you replied there is no data. In this example, the grid shows the data. This means the problem isn't it your grid. It must be in transport. Is your localhost api returning an array? As your example code is unclear and not a minimum reproducible working example I hope the example below will help you pinpoint your problem. Try it in the Telerik DOJO or anywhere you like.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<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>
<div id="grid"></div>
<script>
$(document).ready(function () {
var gridDataSource = new kendo.data.DataSource({
data: [{ "id": 512, "Number": "00000", "Date": "2000-05-01T03:00:00.000Z", "Amout": -999.99, "Net": 0, "Category": "00", "Commen": "Some comment", "Entity": "1234", "Quart": "2", "Confirmed": 1, "Stat": 1 } ],
});
$("#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: "Number",
title: "Number"
}, {
field: "Date",
title: "Date",
format: "{0:dd/MM/yyyy}"
}, {
field: "Amout",
title: "Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment",
width: 300
}, {
field: "Entity",
title: "Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed",
}, {
field: "Stat",
title: "Status",
}]
});
});
</script>
<style>
</style>
</div>
</body>
</html>

The #jpllosa answer help me to find where the issue is. Just adding this answer to explain better how I fix this.
I'm using a node express backend to communicate with my MySQL database, and here I have to allow cors use (if you not familiar with cors, I recommend this link: https://www.section.io/engineering-education/how-to-use-cors-in-nodejs-with-express/)
So my main problem is I'm waiting for a "JSONP" when my data is a "JSON". With the "JSON" type i was receiving the CORS error message as you can see in my last image from the original post.
To allow cors I used the following code in my server.js file:
const cors = require('cors');
app.use(cors({
origin: '*'
}));
In the mentioned link you can see how to add specific domain to your API or use all domains with the "*" character.
Again, thanks to #jpllosa for his answer and time helping me here.

Related

Kendo grid exports headers in some languages with encoded chars

I face some problems with export to excel in Kendo Grid. The problem is that the headers are encoded in the excel. I use Kendo UI with JQuery
The headers are fine in the grid, if the data is fine in the grid and in the exported file, but the headers in the exported file are encoded.
My Grid:
My Expxorted file:
Very Thanks,
Boris
Try this
You can find some documentation here
var grid = $("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
},
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7,
},
sortable: true,
pageable: true,
filterable: true,
columnMenu: true,
reorderable: true,
resizable: true,
columns: [
{ width: 300, locked: true, field: "ProductName", title: "Şehir"},
{ width: 300, field: "UnitPrice", title: "Statù", },
]
}).getKendoGrid();
//set the test values
grid.one("dataBound", function(){
this.dataSource.at(0).set("ProductName", "statù 'this is \" a test");
})
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/excel-export">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.default.min.css" />
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
</div>
</body>
</html>

Add Audio Control as Custom Field - JSGrid

I'm new to JS and have been using JSGrid for all of my grids. I'm at a point where I need to add a custom field. The issue is that I'm unsure if I can add HTML as part of my data. What I'm trying to do is add an Audio Control to play the MP3 for each specific row. I'm able to get a grayed out control there, but can't get the file to pick up. Any help here would be greatly appreciated! Here's sample code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<body>
<div id="jsGrid">
<script>
var AudioField = function(config) {
jsGrid.Field.call(this, config);
};
AudioField.prototype = new jsGrid.Field({
itemTemplate: function(value) {
return $("<audio controls>").css({
display: "inline-block",
width: "50px",
height: "22px"
});
},
});
jsGrid.fields.audio = AudioField;
var clients = [
{ "ID": 0, "User": "Bob Jones", "Instrument": "Banjo", "Notes": "", "Listen": false, "Audio": "<audio controls><source src = 'directory/0.mp3' type = 'audio/mp3'></audio>"},
{ "ID": 1, "User": "Lindsay Wilson", "Instrument": "Banjo", "Notes": "", "Listen": false, "Audio": "" }
];
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: false,
editing: true,
sorting: true,
paging: true,
data: clients,
fields: [
{ name: "ID", type: "number", width: 50, validate: "required" , editing: false},
{ name: "User", type: "text", width: 200, editing: false },
{ name: "Instrument", type: "text", width: 200, editing: false },
{ name: "Notes", type: "text", width: 400},
{ name: "Listen", type: "checkbox", title: "Listen", sorting: false , editing: true},
{ name: "Audio", type: "audio"},
{ type: "control" }
]
});
items = $("#jsGrid").jsGrid("option", "data");
console.log(items)
</script>
</body>
</html>
A friend helped me figure this one out. The issue is a CSS issue, not JavaScript. If I remove the following code, it works properly.
itemTemplate: function(value) {
return $("<audio controls>").css({
display: "inline-block",
width: "50px",
height: "22px"
});
},

Kendo UI, Bound a Piechart to hierarchical remote data

I have dropdown list from sorting grid. I want to manage same grid with pie chart, but I can't bound remote data to the piechart. The piechart must to show categories (the same role, like a dropdown list), but I can't bound to hierarchical remote data.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="project">
<div id="grid"></div>
<div id="chart"></div>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px"/>
</div>
</script>
<script>
$(document).ready(function() {
//Grid displays all products or products from one category, which set from dropdown list
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: kendo.template($("#template").html()),
height: 550,
sortable: true,
pageable: true,
dataBound:function(){
var grid = this;
$.each(grid.tbody.find('tr'),function(){
var model = grid.dataItem(this);
if(model.Discontinued==true){
$('[data-uid='+model.uid+']').addClass('k-state-selected');
}
});
},
columns: [
// { field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name", template: '#=kendo.format(ProductName.toUpperCase())#' },
{ field: "UnitPrice", title: "Price", width: 150, template: 'EUR #: kendo.format("{0:c}", UnitPrice)#' },
{ field: "UnitsInStock", title: "In Stock", width: 150 },
{ field: "Discontinued", title: "Discontinued", width:50 },
{ field: "QuantityPerUnit", title: "Quantity" }
]
});
//DropDown list for sorting by the category
var dropDown = grid.find("#category").kendoDropDownList({
dataTextField: "CategoryName",
dataValueField: "CategoryID",
autoBind: false,
optionLabel: "All",
dataSource: {
type: "odata",
severFiltering: true,
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
},
change: function() {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
var data = [
{
"source": "Hydro",
"percentage": 20,
},
{
"source": "Hydro",
"percentage": 20
},
{
"source": "Solar",
"percentage": 10
},
{
"source": "Nuclear",
"percentage": 30
}
];
var dataSource = new kendo.data.DataSource({
data: data,
group: {field: "source", aggregates: [{
field: "percentage", aggregate: "sum"
}]}
});
dataSource.read();
function getChartData() {
var chartData = [];
var view = dataSource.view();
for(var idx = 0; idx < view.length; idx++) {
chartData.push({
source: view[idx].value,
percentage: view[idx].aggregates.percentage.sum
});
}
return chartData;
}
//From This piechart I want to sorting grid
var chart = $("#chart").kendoChart({
title: {
text: "Categories and Products"
},
legend: {
position: "bottom"
},
dataSource: {
transport: {
read: function(e) {
e.success(getChartData());
}
}
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode",
aggregate: "count",
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#%"
}
}],
seriesClick: function(e){
$.each(e.sender.dataSource.view(), function() {
// Clean up exploded state
this.explode = false;
});
// Disable animations
e.sender.options.transitions = false;
// Explode the current slice
e.dataItem.explode = true;
e.sender.refresh();
}
});
});
</script>
<style>
#grid .k-grid-toolbar
{
padding: .6em 1.3em;
}
.category-label
{
vertical-align: middle;
padding-right: .5em;
}
#category
{
vertical-align: middle;
}
.toolbar {
float: center;
}
</style>
</div>
You can bind a kendo pie chart with remote data, I have done this many times in the past. Take a look at the following link for an example on how to achieve this.
Kendo pie chart - remote binding

How to detect a filtering is done in Kendo?

After filtering being done, I have to select a second page/do something. How can I detect it?
Thank you!
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
dataBinding: onDataBinding,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
function onDataBinding(arg) {
if ($("#grid").data("kendoGrid").dataSource.filter()) {
alert("Filter has been applied to grid");
}
else {
alert("Filter has NOT been applied to gridNo filter");
}
}
</script>
</body>
</html>
Let me know if any concern.

Kendo Grid filter to use combo box with column.values rather than drop down list

I'm trying to get Kendo's Grid to show a filter using a combo box rather than a drop down list when used with values. What I mean is, on the grid columns array, each column can be given a list of values (objects with text and value properties) for each possible entry in the database, thereby rather than showing a code, it shows a recognisable name or text instead of the code. The problem is that whenever I specify values against the column, the filter reverts to a fixed list of criteria and a drop-down list, which I don't want.
See an example of what I mean here. What I'd like to see is the filter (on the Category column) to show a combo-box rather than a drop down list, but still use the values against the codes in the table to show in the data in the grid, but it doesn't seem to work.
As you say it doesn't work with the values property, so one approach would be to set up a custom row template and use a lookup function on category ID and replace it with the corresponding text:
var categories = [{
"value": 1,
"text": "Beverages"
}, {
"value": 2,
"text": "Condiments"
}, {
"value": 3,
"text": "Confections"
}, {
"value": 4,
"text": "Dairy Products"
}, {
"value": 5,
"text": "Grains/Cereals"
}, {
"value": 6,
"text": "Meat/Poultry"
}, {
"value": 7,
"text": "Produce"
}, {
"value": 8,
"text": "Seafood"
}];
function getCategory(catID) {
return $.grep(categories, function(n, i) {
return n.value === catID;
})[0].text;
}
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: {
validation: {
required: true
}
},
CategoryID: {
field: "CategoryID",
type: "number",
defaultValue: 1
},
UnitPrice: {
type: "number",
validation: {
required: true,
min: 1
}
}
}
}
}
});
var rowTemplateString = '<tr data-uid="#: uid #">' +
'<td>#: ProductName #</td>' +
'<td>#: getCategory(CategoryID) #</td>' +
'<td>#: UnitPrice #</td>' + '<td></td>' +
'</tr>';
var altRowTemplateString = rowTemplateString.replace('tr class="', 'tr class="k-alt ');
var commonSettings = {
dataSource: dataSource,
filterable: true,
groupable: true,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [{
field: "ProductName",
title: "Product Name"
},
{
field: "CategoryID",
width: "150px",
//values: categories,
dataTextField: "text",
dataValueField: "value",
dataSource: categories,
filterable: {
ui: function(element) {
element.kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: categories
});
}
},
title: "Category"
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "150px"
},
{
command: "destroy",
title: " ",
width: "110px"
}
],
editable: true
};
$("#grid").kendoGrid($.extend({
rowTemplate: rowTemplateString,
altRowTemplate: altRowTemplateString
}, commonSettings));
});
Note: In this demo I haven't tried to handle the template for the Delete column. I just left it blank.
Here's the Dojo http://dojo.telerik.com/oFulu
Try this One,According to your demo here
</script>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
var categories = [{
"value": 1,
"text": "Beverages"
},{
"value": 2,
"text": "Condiments"
},{
"value": 3,
"text": "Confections"
},{
"value": 4,
"text": "Dairy Products"
},{
"value": 5,
"text": "Grains/Cereals"
},{
"value": 6,
"text": "Meat/Poultry"
},{
"value": 7,
"text": "Produce"
},{
"value": 8,
"text": "Seafood"
}];
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true} },
CategoryID: { field: "CategoryID", type: "number", defaultValue: 1 },
UnitPrice: { type: "number", validation: { required: true, min: 1} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
filterable: true,
groupable: true,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
{ field: "ProductName", title: "Product Name" },
{
field: "CategoryID",
width: "150px",
values: categories,
editor:function(container,options)
{
$('<input name-"' + options.fields +'"/>').
appendTo(container).kendoComboBox({
autoBind:false,
dataTextField:"text",
dataValueFiled:"value",
dataSource:new kendo.data.DataSource({
schema:{
model:{
id:"value",
fields:{
text:{},
value:{}
}
}
},
data:categories
})
})
},
title: "Category"
},
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "150px" },
{ command: "destroy", title: " ", width: "110px"}],
editable: true
});
});
</script>

Categories