This is a migrated thread and some comments may be shown as answers.
How to bind the results of REST API Call to the grid
2 Answers 12 Views
This is a migrated thread and some comments may be shown as answers.
Ross
Top achievements
Rank 1
Ross asked on 10 Apr 2021, 06:15 PM

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
}

 

2 Answers, 1 is accepted

Sort by
0
Ross
Top achievements
Rank 1
answered on 11 Apr 2021, 06:23 PM

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

0
Accepted
Tsvetomir
Telerik team
answered on 14 Apr 2021, 01:33 PM

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Tags
Grid
Asked by
Ross
Top achievements
Rank 1
Answers by
Ross
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or