Search code examples
javascriptjquerykendo-uikendo-gridkendo-datasource

Kendo grid doesnt populate from API request

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)

network screen with the 200 return from the API

console print screen with no errors (only this warnings)

json instead of jsonp - CORS error

Solution

  • 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>