How to bind the results of REST API Call to the grid

[Ross]

Hi, we are currently evaluating Kendo UI and are having some trouble figuring out how to bind results a REST API call to the grid. 

Most of the examples we have found are for other formats or local files. We are going to have to work exclusively with a vendor REST API so we need to figure this out in general. Ultimately we also want to be able to bind these results to a Diagram as well. But the focus is on a simple grid for now.

Any help would be appreciated including if there is a better way to do this.

 

<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script> 
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
<div class="box wide">
<div id="DDisplayCommitteeName"></div>
<div id="grid"></div>
    <div class="demo-section k-content wide">
        <div id="diagram"></div>
    </div>
<div>
        <h4>Export committee chart</h4>
        <div class="box-col">
            <button class='export-pdf k-button'>Export as PDF</button>
        </div>
        <div class="box-col">
            <button class='export-img k-button'>Export as Image</button>
        </div>
        <div class="box-col">
            <button class='export-svg k-button'>Export as SVG</button>
        </div>
</div>
</div>
<script type="text/javascript">
/* GRID BLOCK */
$.ajax({
       type: "GET",
       url: "https://#####?QueryName=$/_Ross/Committee Members&offset=0&limit=100&CommitteeName='Finance Committee'",
       // data: args, // parameters if available
   headers: {"RequestVerificationToken": document.getElementById("__RequestVerificationToken").value,"X-TypeNameHandling": "false"},
       dataType: "application/json",
       success: function (result) {

           var grid = $("#grid").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);
       }
   });

Example json results:

{
    "Items": [
        {
            "Committee": "Governance Committee",
            "Member": "Mr. Brodie Archer",
            "Member ID": "22630",
            "Position": "Chair",
            "Status": "A",
            "TermStart": "2020-05-13T00:00:00",
            "TermEnd": "2022-05-31T00:00:00",
            "Title": "Director, Operations",
            "PositionRank": 10,
        },
        {
            "Committee": "Governance Committee",
            "Member": "Mr. David William Smith",
            "Member ID": "21537",
            "Position": "Member",
            "Status": "A",
            "TermStart": "2019-10-01T00:00:00",
            "TermEnd": "2021-10-31T00:00:00",
            "Title": "Team Lead",
            "PositionRank": 80,
        },
        {
            "Committee": "Governance Committee",
            "Member": "Mrs. Sue Pack",
            "Member ID": "20966",
            "Position": "Member",
            "Status": "A",
            "TermStart": "2019-10-01T00:00:00",
            "TermEnd": "2021-10-31T00:00:00",
            "Title": "",
            "PositionRank": 80,
        },
        {
            "Committee": "Governance Committee",
            "Member": "Ms. Claire F. Hosken",
            "Member ID": "19069",
            "Position": "Member",
            "Status": "A",
            "TermStart": "2019-10-01T00:00:00",
            "TermEnd": "2021-10-31T00:00:00",
            "Title": "Senior Vice President",
            "PositionRank": 80,
        }
    ],
    "Offset": 0,
    "Limit": 100,
    "Count": 4,
    "TotalCount": 4,
    "NextPageLink": null,
    "HasNext": false,
    "NextOffset": 0
}

 

[Ross]

Just an addendum as I can't seem to edit my post. I have updated the datatype to 

dataType: "json",

 

I've also confirmed I'm getting a json response back but I'm still not able to bind the result the grid.

Thanks

[Tsvetomir]

Hi Ross,

When the Grid is set up to request a service that is of type json, the dataType should be set. However, if the service's endpoint does not the same as the page requesting it, you should set it to jsonp. 

I have created a sample project where I have hosted the sample response that you have shared in a third-party service.

https://dojo.telerik.com/ISazeDaD

Note that I have added also the data source's schema.data option.

Also, I have noticed that within the data that you are returning, there is a property called "Member ID". Please note that this is an invalid JavaScript identifier and it will cause a JavaScript exception. The property should contain no empty spaces.

Let me know if additional details are needed.

 

Kind regards,
Tsvetomir
Progress Telerik