Icenium Everlive is Backend as a Service offering from Telerik. In this post we will take a look on how easily KendoUI DataSource can be used to fetch data from Icenium Everlive.

To start with, in Everlive I have created a content type with name Session. In Everlive Content type represents a data type or loosely I can say a table. I have created content type with name Sessions. Now we need to fetch all the items from Sessions content type using Kendo UI DataSource.

Very first we need to add reference of Everlive as below,


<script src="scripts/everlive.all.min.js"></script>

After adding reference create instance of Everlive as below. You need to pass Everlive application key as parameter while creating instance of Everlive. You will find application key on Everlive portal.


var el = new Everlive('W1286lVOH0DXYZ');

Now you will be amazed seeing how easily you can fetch all the items from Session content type using Kendo UI DataSource. Only you need to provide type as everlive and in transport typeName as name of Everlive Content type.


var sessionDataSource = new kendo.data.DataSource({
 type: 'everlive',
 transport: {
 typeName: 'Sessions'
 },
 schema: {
 model: { id: Everlive.idField }
 }

});

While fetching data from Everlive using Kendo UI Data Source, we need to set following

type as everlive
In transport typeName as content type name. You need to provide name of the content type which data items you want to fetch. In this case we want items of Sessions content type so typeName is Sessions

You can verify in any debugger console that data is fetched from Everlive in Kendo UI DataSource.

Now once you have data at the client side you can use them as of your requirement. You can bind that ListView , GridView etc. I hope you find this post useful. Thanks for reading.

Tearch: Creating Twitter Search Application using Kendo UI Mobile

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

Follow @debug_mode

In this post, we will create Twitter Search Application using Kendo UI Mobile. In order to create this application, we will learn about

Kendo UI Mobile View
Kendo UI Mobile ListView
Kendo UI DataSource
Kendo UI Template
Kendo UI ModalView
Working with HTML5 localstorage

Idea behind application is that we will search tweets using Twitter API returning JSON. Application will look like as following

On iPhone

On Android

Step 1 : Add References

Before we start creating application, we need to add the references of required css and js files.

After adding references we need to initlaize the Kendo Mobile Application. Put following code just before closing body tag.

Step 2: Create Layout

We will start with creating layout of the application. In header we want title of the application and in footer we want two buttons. Search button and Setting button. Layout can be created as following

Step 3: Create Setting View

In setting view, we are going to put input box and a button.

On click event of the button, text from input box will be saved in local storage. Twitter search will be performed on the text saved in local storage. We are going to use HTML5 localstorage API to save data locally. If you notice that data-click attribute of button is set to javascript function savesettings. Savesettings function is as following

When user will navigate to Settings view, saved search term should be displayed to user. For that we are setting data-show attribute of settings view to javascript function readsetting. Readsetting function is as following. In this function, we are checking that if there is any setting saved. If not then we are displaying default text “#KendoUI”.

Once setting is saved successfully, we want to show a message to user. We will use kendo UI Mobile ModelView widget to display confirmation message to user. To work with Kendo UI Mobile Model View, we need to put following div inside settings view

After putting model view we need to open this confirmation box once data is saved successfully. We can do that by modifying savesettings function. After modification function is as following. In below function we are getting reference of Kendo UI Mobile Modal View and calling Open method of that.

There is a close button in confirmation box. closeModalView javascript function is called on click event of this button to close the confirmation box.

Step 4 : Create Search View

Now we need to create view in which we will show the tweets on basis of the search term. Let us create Kendo UI Mobile View and put a Kendo UI Mobile ListView inside that view. ListView is KendoUI widgets used to show data. Fetched Tweets from Twitter Server will be displayed in the ListView.

In above code, we are performing the following operations.

Creating KendoUI Mobile view by setting data-role property of HTML div element as view
Setting data-show attribute of view to javascript function showTweets
Creating ListView inside mobile view.
ListView is being created by setting data-role attribute of HTML ul element as listview

Data-Template defines how data should be displayed. Template can be created as following

After creating Data-Template, we need to fetch tweets from Twitter on basis of search term and create Data Source. This can be done as following

The value of q is the search criteria in while creating transport to fetch tweets. We have created Data-Source and Data-Template. Next we need to set Data-Source and Data-Template of ListView. That can be done as following

After setting DataSource and DataTemplate our application is ready. To make application more immersive we have put some styling. You can find those CSS in code section of the article. For your reference source code of the application is as following

Default.html


<!DOCTYPE html>
<html>
 <head>
 <title></title>
 <meta charset="utf-8" />
 <script src="kendo/js/jquery.min.js"></script>
 <script src="kendo/js/kendo.mobile.min.js"></script>
 <script src="scripts/hello-world.js"></script>
 <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <link href="styles/main.css" rel="stylesheet" />
 </head>
 <body>

 <div data-role="view" id="searchview" data-title="Search" data-show="showTweets" >
 <ul id="tweetList"
 data-endlessScroll="true"
 data-role="listview"
 data-style="inset">

 </ul>
 </div>

<div data-role="view" id="settingview" data-title="Settings" data-show="readsettings">
 <input type="text" id="searchterm" class="searchterm"/>
 <a data-role="button" type="button" id="savebutton" data-click="savesettings">Save</a>
 <div id="status" data-role="modalview" data-title="Confirmation">
 <header data-role="header">
 <div data-role="navbar">
 <span data-role="view-title">Confirmation</span>
 </div>
 </header>
 <h2> Settings Saved.</h2>
 <div data-role="footer">
 <a id="closebutton" data-align="right" data-click="closeModalView" data-role="button">Close</a>
 </div>
 </div>
 </div>

 <div data-role="layout" data-id="mobile-tabstrip">
 <header data-role="header">
 <div data-role="navbar">
 <span data-role="view-title"></span>
 </div>
 </header>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#searchview" data-icon="search">Search</a>
 <a href="#settingview" data-icon="settings">Settings</a>
 </div>
 </div>
 </div>

 <script id="tweetTemplate" type="text/x-kendo-template">
 <img class="profileImage" src=#= profile_image_url# />
 <h4><a href="http://twitter.com/${from_user}">@#=data.from_user#</a></h4>
 <h5>#=text#</h5>
 </script>

 <script>
 var app = new kendo.mobile.Application(document.body,
 { transition: "slide",
 layout: "mobile-tabstrip",
 initial : "searchview"});

 </script>
 </body>
</html>

<pre> <style scoped>
 #searchterm {
 height:25px;
 width: 310px;
 margin-left: 03px;
 margin-top: 40px;
 margin-right: 03px;

 }
 #savebutton{
 display: block;
 text-align: center;
 margin: .7em .12em 0;
 font-size: 1.2em;
 }
 #closebutton{
 display: block;
 text-align: center;
 margin: .7em .12em 0;
 font-size: 1.2em;
 }

 #searchview
 h4 {
 display: inline-block;
 font-size: 1.2em;
 margin: 0.9em;
 }
 h5 {
 display: inline-block;
 font-size: 0.9em;
 margin-left: 5px;
 margin-top:0px
 }

 #searchview
 img {
 float: left;
 width: 4em;
 height: 4em;
 margin: 0;
 -webkit-box-shadow: 0 1px 3px #333;
 box-shadow: 0 1px 3px #333;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 }

 </style></pre>

HelloWord.js


// JavaScript Document

// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
var termtosearch="#kendoui";
function onDeviceReady() {

}

function savesettings()
{
 localStorage["searchterm"]= $("#searchterm").val()
 var modalView = $("#status").data("kendoMobileModalView");
 modalView.open();

}

function readsettings()
{
 if(localStorage.searchterm)
 {
 $('#searchterm').val(localStorage["searchterm"]);
 termtosearch = localStorage["searchterm"];
 //console.log(termtosearch);
 }
 else
 {
 $('#searchterm').val("#kendoui");
 termtosearch = "#kendoui";
 //console.log(termtosearch);
 }
}

function closeModalView(e) {
 // find the closest modal view, relative to the button element.
 var modalView = e.sender.element.closest("[data-role=modalview]").data("kendoMobileModalView");
 modalView.close();
 }

&nbsp;
function showTweets(e) {

 if(localStorage.searchterm)
 {
 $('#searchterm').val(localStorage["searchterm"]);
 termtosearch = localStorage["searchterm"];
 //console.log(termtosearch);
 }
 else
 {
 $('#searchterm').val("#kendoui");
 termtosearch = "#kendoui";
 //console.log(termtosearch);
 }

var tweets = new kendo.data.DataSource(
 {

transport: {
 read: {
 url: "http://search.twitter.com/search.json",
 contentType: "application/json; charset=utf-8",
 type: "GET",
 dataType: "jsonp",
 data: {
 q: termtosearch
 }
 }
 },
 schema: {
 data: "results",
 total: "results_per_page"
 }

});

 tweets.fetch();
 var template1 = kendo.template($("#tweetTemplate").text());
 $("#tweetList").kendoMobileListView({
 dataSource: tweets,
 template:template1

 });

}

I hope you find this post useful. Thanks for reading

Follow @debug_mode

Consuming JSON based WCF REST Service in Kendo UI Mobile

Posted by Dhananjay Kumar | Angular Teacher | Angular Consultant | ng-India

In this post we will walkthrough on consuming WCF REST Service in Kendo UI Mobile. We may consider this post is divided in two parts. In part 1, we will see the way to create REST based WCF service and in part2 of this post we will consume that REST Service in Kendo UI mobile.

Creating WCF REST Service

If you are new to WCF and wondering how to create WCF REST Service .Please read many articles on WCF REST Service here .

To get it started quickly fire visual studio and create a new project. From WCF tab select WCF Service Application project template.

Delete all the codes generated from both the IService1.cs and Service1.svc.cs file.

Although in this post we are not going to fetch and data from database. We will return C sharp collection as data from WCF REST Service. However we can use any methodologies to create data model and expose data from data model as service. To make it simple we are going to work with following business object.


public class Bloggers
{
[DataMember]
public string BloggerID { get; set; }
[DataMember]
public string Name { get; set; }
[DataMember]
public string Technology { get; set; }

}

Define service as following


[ServiceContract]
 public interface IService1
 {

[OperationContract]
 [WebGet(UriTemplate = "/GetBloggers",
 ResponseFormat = WebMessageFormat.Json,
 RequestFormat = WebMessageFormat.Json)]
 List<Bloggers> GetBloggers();

 }

If you notice we have explicitly set the Request and Response message format as Json. Service is implemented as following. There is not much fancy about the service implementation, it is simply creating collection of business object and returning.


using System.Collections.Generic;

namespace RESTServiceForKendo
{

 public class Service1 : IService1
 {

public List<Bloggers> GetBloggers()
 {
 List<Bloggers> lstBloggers = new List<Bloggers>()
 {
 new Bloggers { BloggerID = "1", Name= "Jesse Liberty ", Technology = "XAML"},
 new Bloggers { BloggerID = "2" , Name = "Michael Crump" , Technology = "XAML"},
 new Bloggers { BloggerID = "3" , Name = "Chris Eargel" , Technology = "C Sharp"},
 new Bloggers { BloggerID = "4" , Name = "Chris Sells" , Technology = "All"},
 new Bloggers { BloggerID = "5" , Name = "John Bristowe" , Technology = "Web"},
 new Bloggers { BloggerID = "6" , Name = "Todd Anglin " , Technology = "KendoUI"},
 new Bloggers { BloggerID = "7", Name= "John Papa ", Technology = "XAML"},
 new Bloggers { BloggerID = "8" , Name = "Glen Block" , Technology = "REST"},
 new Bloggers { BloggerID = "9" , Name = "Lohith " , Technology = "Telerik"},
 new Bloggers { BloggerID = "10" , Name = "Scott Hanselman " , Technology = "All"},
 new Bloggers { BloggerID = "11" , Name = "Debugmode" , Technology = "Kendo"},
 new Bloggers { BloggerID = "12" , Name = "Pinal Dave " , Technology = "SQL Server"},
 new Bloggers { BloggerID = "12" , Name = "Julie Lerman" , Technology = "Entity Framework"}

 };
 return lstBloggers;
 }
 }
}

Next we need to configure Endpoint. Rather than creating Endpoint we are going to use factory class. Class System.ServiceModel.Activation.WebServiceHostFactory enables REST Endpoint on WCF Service. To set factory class right click on Service1.svc and click on view markup. In markup add factory class as following.

After configuring factory class we are all set with WCF REST Service. To test the service, run the service in browser. We should be getting Bloggers information as JSON data in browser.

Once you get data in browser (if you are using IE then you will be prompted to save returned data), we are all set to consume this data in Kendo UI Mobile.

Consuming in Kendo UI Mobile

We will consume JSON data from WCF REST service step. If you are using Visual Studio for Kendo UI development then you may find below post useful

Setting Development Environment in Visual Studio 2010 using NuGet for KendoUI

To proceed with follow the following steps

Step 1

Very first add the required references to work with Kendo UI Mobile. You need to add reference in head section of the page.

<head>
 <title></title>
 <meta charset="utf-8" />
 <script src="kendo/js/jquery.min.js"></script>
 <script src="kendo/js/kendo.mobile.min.js"></script>
 <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

</head>

After adding references we need to initialize the mobile. To do this adds below script just before the closing body tag.


<script>
 var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "pageLayOut" });
 </script>
</body>

You can see that layout and transition has been set. We will create layout in next step.

Step 2

After adding reference we need to create layout of the application. In layout we want two buttons in bottom tabstrip and a back button on the top. Layout can be created as following


&nbsp;
<div data-role="layout" data-id="pageLayOut">
 <header data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">Back</a>
 <span data-role="view-title"></span>
 </div>
 </header>
 <div data-role="footer">
 <div data-role="tabstrip">

<a href="#homeView" data-icon="home">Home</a>
 <a href="#bloggerView" data-icon="action">Bloggers</a>

</div>
 </div>
 </div>

Step 3

Next we need to create different views. As you notice from layout that we need to create two views. One is homeView and other bloggerView. In homeView we will display a message.

homeView is as following


<div data-role="view" id="homeView" id="homeView" data-title="Bloggers">

<h1>Welcome!</h1>
 <p>
 In this App we will fetch Bloggers information from WCF REST Service
 </p>
 </div>

Step 4

Now we need to create bloggerView. In this view we will put a Kendo UI Mobile ListView control. All the data returned from service will be bind to this ListView.

<div data-role="view" id="bloggerView" data-title="Bloggers" data-show="showBloggers">

 <ul id="bloggerList"
 data-source="bloggersData"
 data-endlessScroll="true"
 data-template="bloggersTemplate"
 data-role="listview"
 data-style="inset">
 </ul>
 </div>

There are couples of important points worth discussing about above code. In above listview we are setting data-source and data-template as following

So we need to

Create data-source bloggersData from the returned JSON data from the WCF REST Service (step5)
Create data-template bloggersTemplate (step4)

Step 4

Data Template allows us to render data as we want. It is used to format the displaying of data. A template can be created as following. We are creating a Kendo UI list view link button and displaying Name and Technology of the blogger. Id of this template is set as data-template property of list bloggerList.

<script id="bloggersTemplate" type="text/x-kendo-template">

 <a href="\#BloggerDetailsView" class="km-listview-link" data-role="listview-link">
 <h2>#=data.Name#</h2>
 <h4>#=data.Technology#</h4>
 </a>

 </script>

Step 5

Now we need to create datasource. We are going to create Kendo UI DataSource reading JSON data from the service.

In Kendo UI DataSource configuration, read attribute has been set to the URL of the WCF REST Service. Since service is retuning JSON data hence Accept type is as application/json.

Finally in data-show method of view we will fetch data from the DataSource. If you notice data-show attribute of bloggerView is set to showBloggers.

Putting all the discussion together DataSource can be created and data from that can be fetched as shown in below code

 var bloggersData;

bloggersData = new kendo.data.DataSource(
 {
 transport: {
 read: {
 url: "http://localhost:56863/Service1.svc/getBloggers",

data: {
 Accept: "application/json"
 }
 }
 }

});

function showBloggers(e) {
 bloggersData.fetch();

Now we are all set to run the application. On running we should be getting Bloggers data as following

Home View

Blogger View

In this way you can consumed a JSON based WCF REST Service in Kendo UI mobile. I hope you find this post useful. Thanks for reading.

Helping Ninja Technologists

Developer Experiences powered by GTM Catalyst

Kendo UI DataSource

How to fetch data from Icenium Everlive using KendoUI DataSource

Tearch: Creating Twitter Search Application using Kendo UI Mobile

Consuming JSON based WCF REST Service in Kendo UI Mobile