How to fetch Data from Telerik Everlive using REST API in a Web Application.

Learn more about Kendo UI here

Learn more about Icenium here

In this post we will take a look on fetching data from Telerik Everlive using REST API and use it in a web application. In web app we will be using Kendo UI DataSource to bind data to Kendo UI web ListView.

We are going to learn following,

  • Fetch data from Telerik Everlive using REST API
  • Create Kendo DataSource from returned data
  • Bind data to Kendo UI ListView

Okay so to keep it simple, I have created a simple Content Type Products in Everlive project as below. Permission of this Products content type is set as Public.

clip_image001

To fetch data from Telerik Everlive using REST API, Simply you can fetch data from Icenium Everlive using a AJAX call. You need to provide

  1. URL of the Everlive project with API key
  2. Content type name should be appended in URL. In this case we have appended Products (name of content type) in URL.
  3. Set type as GET
  4. You need to set two callback function. One Callback function will be called on success and another on error.

So data can be fetched using below code. You may want to notice that you need to replace yourapikey in URL with API key for your Everlive project.


$.ajax({
 url: 'http://api.everlive.com/v1/yourapikey/Products',
 type: "GET",
 headers: {
 "Authorization": "Bearer ${AccessToken}"
 },
 success: function (data) {
 BindDataToListView(data);
 },
 error: function (error) {
 alert(JSON.stringify(error));
 }
})

BindDataToListView is callback function and this function will be called on success fetching of data. In this function you need to create Kendo UI DataSource from returned data. Before we do that let us examine what value we get from Everlive server.

clip_image001[6]

You should get below output in browser console,

clip_image002

You can see that in output you are getting count and data in Result property of the returned Object. So you can create Kendo DataSource as follows,

function BindDataToListView(e)
{
 console.log(e);
 var dsource = new kendo.data.DataSource(
 {
 data: e.Result
 });

}

Again in Console log you can view that Kendo DataSource has been created from returned data.

clip_image001[8]

Next we need to create Kendo Template and Kendo ListView. We are going to create a very simple template as follows,


<script type="text/x-kendo-template" id="producttemplate">
 <div>
 <h2>#:ProductName# <br/>
 <h3>#=UnitInStock# #:UnitPrice#</h3>
 </div>
</script>

And to create Kendo ListView create a HTML div as follows,


<div id="listView"></div>

Again let us go back to callback function BindDataToListView() and convert div to Kendo ListView and bind already datasource

function BindDataToListView(e)
{
 console.log(e);
 var dsource = new kendo.data.DataSource(
 {
 data: e.Result
 });
 console.log(dsource);

$("#listView").kendoListView({
 dataSource: dsource,
 template: kendo.template($("#producttemplate").html())
 });

}

This is it. We are setting datasource and template after converting HTML div as Kendo ListView. When you run this web application you should get output as below,

clip_image002

In this way you can fetch data from Telerik Everlive using REST API and use in Kendo UI Web. I hope you find this post useful. Thanks for reading.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s