Kendo grid doesnt populate from API request

Question

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)

Answer 1

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>

Answer 2

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.