Three steps of working with JavaScript Array and Kendo UI Mobile ListView

In this post we will learn working with JavaScript array and KendoUI Mobile ListView in three simple steps.

Step 1: Create Data Source

Very first you need to create data source. Application can read data from various sources. Some of the source can be as following

  • Reading data from remote data source
  • Reading data from local memory
  • Reading static data from local array.

Let us create a data source by reading data from local array.


var speakers = [
{

SpeakerName: "Chris Sells",
SpeakerTitle: "Author, Ex- Microsoft and ardent community contributor",
SpeakerPhoto: "speakerimages/cs.jpg"

},
{

SpeakerName: "Steve Smith",
SpeakerTitle: "Speaker, Author, Microsoft Regional Director and MVP",
SpeakerPhoto: "speakerimages/ss.JPG"

},
{

SpeakerName: "Dr.Michelle Smith",
SpeakerTitle: "Enterprise Consultant",
SpeakerPhoto: "speakerimages/ms.jpg"

},
{

SpeakerName: "Gaurav Mantri",
SpeakerTitle: "Founder Cerebrata & Windows Azure MVP",
SpeakerPhoto: "speakerimages/gm.JPG"

}

];

Step 2: Create Template

Template is the way to tell the platform the way you want to display data. You already have data and next you need to decide the way you want to display or render data. In Kendo UI Mobile you can create template as following,


<script type= "text/x-kendo-template" id="speakersTemplate">
<div>
<img src=#=SpeakerPhoto# alt="#= SpeakerName #" />
#= SpeakerName #</br>
<span>
#=SpeakerTitle#
</span>
</div>
</script>

To create Kendo Template, You need to create a script with type text/x-kendo-template. Values from data source will be rendered by putting property name as following

image

In above case source of an image can be set as following. SpeakerPhoto and SpeakerName are properties of data array.

image

To make data rendering more immersive you need to set the style of data in CSS. You will notice in above template that we are setting class attribute of img and span tag. These classes are defines in CSS as following,


.pullImage {
width: 64px;
height: 64px;
border-radius: 3px;
float: left;
margin-right: 10px;
}

.listTime
{
font-size: .8em;
font-weight: 100;
}

Step 3: Create ListView

By step 2 you have created data source and template. Next you need to create ListView. Creating ListView is very simple and can be created as following,


<div data-role="view" id="dataview" data-title="Data">

<div>
<ul id="speakerslist"
data-template="speakersTemplate"
data-source="speakers"
data-endlessScroll="true"
data-role="listview"
data-style="inset">
</ul>
</div>

</div>

To create ListView you need to set data-role attribute of <ul> element as listview. To define how data should be displayed in the ListView set data-template attribute and data source can defined by setting data-source attribute.

Note: if we have put speaker’s photos locally in spakerimages folder. Since we are setting speaker photo attribute in Speaker JavaScript array.

Running the Application

On running of the application you should get ListView with speaker’s details as following

image

In this way you can work with data from JavaScript array and Kendo UI mobile ListView. I hope you find this post useful. Thanks for reading.

How to set background image of Kendo UI Mobile View

In this post we will take a look on how to set background image of Kendo UI Mobile view. Let us say we have a view as following,

image

This Kendo UI Mobile View is created as following,


<div data-role="view" id="tabstrip-home" data-title="Hello World!">
<h1>Welcome!</h1>
<p>
This is View
</p>
</div>

Now you have a requirement to put a background image in this view and set the colors of the texts on the view. You can do it by setting style of div in the CSS. This can be done as following


#tabstrip-home .km-content{

background-image: url('../appimages/backgroundimage.jpg');
background-size: auto 100%;
background-repeat: repeat;
color : white;

}

In above code snippet ,

  1. Tabstrip-home is id of the view. Background image of this particular view will be set to an image.
  2. Background image is inside the folder appimages. We are setting backgroundimage.jpg as the background of the view.
  3. Image will repeat itself as background of the view.
  4. Text of the view content has been set to white.

After setting style view should look like as following image,

image

In this way you can set an image as background of KendoUI Mobile View. I hope you find this post useful. Thanks for reading.

Conditional Navigation between Views in Kendo UI Mobile

Recently while working with Kendo UI Mobile, I had to navigate from one view to other view inside if else condition. I had scenario, something like following

image

To achieve this, first I tried something like following,

image

In above approach, I was able to navigate to views. However after navigating views were not adhering to the layout set for the application because I was creating new instance of the Application. So certainly this approach was not a suitable solution to go ahead with.

To solve this, you need to navigate on instance which you already created while initializing the html for mobile application. You create something like this on HTML.

image

To navigate conditionally just call navigate function on app. essentially you do not need to recreate instance of application. So if we modify above solution, you do not need first line of the code. Point to be noted here is that app is the variable name we are using while initializing the application on the html.

image

In this way you can navigate to different views from JavScript in KendoUI Mobile. I hope you find this post useful. Thanks for reading.

How to find which button is selected in KendoUI Mobile ButtonGroup

In this post we will take a look on, how to find which button is selected in KendoUI Mobile ButtonGroup . Let us suppose we have a ButtonGroup like following,

image

ButtonGroup will look like following

image

In JavaScript we can find index of selected button as following.

image

buttonsearchgroupis the id of the ButtonGroup. We can check for the selected index in if condition to perform a task according to the selected button in ButtonGroup. This can be done as following,


if ( $("#buttonsearchgroup").data("kendoMobileButtonGroup").current().index() == 1)
 {
 console.log("session button selected");
 }
 else
 {
 console.log("speaker button selected");
 }

In this way you can find which button is selected in KendoUI Mobile ButtonGroup. I hope you find this post useful. Thanks for reading.

Creating First Cross-Platform Application using Kendo UI Mobile and Icenium


Learn and explore more about Icenium here

Learn more about Kendo UI Mobile here

Yes as you see in below image that I am developing an application for IPhone on my Windows Machine and this is possible using Icenium.

Being an application developer I am very much excited with the launch of ICENIUM .Icenium is Cloud Based IDE to create Hybrid Application. If you are new to Hybrid Application then you may want to read what is a Hybrid Mobile App? And you may want to read As a Developer why should I worry about Hybrid Application Development?

Learn and explore more about Icenium here

Icenium provides you two different types of IDE.


In this post we are going to use Icenium Graphite to create our first Cross-platform application. To start with launch Icenium Graphite IDE. You will be asked to Login to Icenium. You can login using any of the following as given in the image below.

Let us choose Telerik ID to login into Icenium IDE.

 

After successful login you will get a Project dashboard. On project dashboard you can perform following three tasks

Create New Project
Browse existing Projects
Clone a project

In below image you can see list of existing projects. To create new project click on New.

There are three project templates as following

  • Blank
  • Using jQuery
  • Using Kendo UI Mobile

Let us go ahead and create a cross-platform device application using Kendo UI Mobile.


Give name of the project. You will notice that you are not asked to select a location to save the project. Since Icenium is a cloud IDE, it saves the project in the cloud rather than saving it locally. Click ok to create the application.

Let us go ahead and explore Project Navigator. You will find project structure as given in following image,


On opening of index.html, you will find some prior code there for reference. As you see in below image that to create Hybrid application using Kendo UI Mobile, you need minimum following references.



There are three default files you will be working on. However you are free to give any name to files.

 

Let us go ahead and run the default application got created by choosing Kendo project template.


There are two ways you can run the application. You can run application either

  1. On Device
  2. In Simulator

On running you get application running in iPhone simulator.


There are four simulator supported in Icenium.


If you want to run the application in Android Simulator change the Device simulator and you are done

There are many other options available in Device Simulator. We will discuss them in detail in further blog posts.


 

In this way you can create, test and deploy a truly cross-platform application using Kendo UI Mobile and Icenium. I hope you find this post useful. Looking forward to share more learning on Icxenium and Kendo UI Mobile with you in further blog posts.

Transition styles in Kendo UI Mobile

In this post we will learn different Transition Styles between Kendo UI Mobile Views.

To start with let us assume we have an application as following. This application consists of two views. On click of Kendo button, user will navigate to Other View.

image

There are four supported Transition styles, they are as follows

image

Overlay transition style

See the video for the behavior of Overlay transition style

Slide transition style

See the video for the behavior of Slide transition style

Zoom transition style

See the video for the behavior of Zoom transition style

Fade transition style

See the video for the behavior of Fade transition style

Default transition style is “slide”. We can apply transition style in three ways

  1. At the application level
  2. At the view level
  3. At the control level

At Application Level

When set at application level same transition style will be applied to entire application. All views of the application will adhere to the same transition style. At application level transition style can be set by providing value of transition property in Kendo mobile initialization.

image

At View Level

Other option to set transition style is at view level. On navigating to this view user will experience transition style set at the view.

image

At Control Level

We can set transition style at control level as well. In following case we are applying transition style to a kendo button. User will experience zoom transition behavior while navigating to view set in the href property of the keno button.

image

If  transition style is set at all the three levels then Control level has highest priority whereas application level has lowest priority.

image

In this way you can apply different transition style to the application. For your reference find the source code of above discussed application below.


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<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="layout" data-id="applayout">
<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>

<div data-role="view" id="mainview" data-title="Main View">
<a id="navigate"
href="#otherview"
data-role="button"
>
Navigate to other view
</a>
</div>

<div data-role="view"
id="otherview"
data-title="Other View"
>

</div>

<script>

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

</body>
</html>

I hope you find this post useful. Thanks for reading.

Slides and Source Codes to the “Webinar on Creating HTML5/JS Mobile & Web Apps with Kendo UI” available to download

Hi Everyone,

image

Thank you so much for attending Kendo UI webinar yesterday. We had exciting time and hope you found webinar useful. As promised we are making all the resources of webinar available to download.

Download Slides and Source Codes from here

If you missed the webinar then you can start learning about Kendo UI from here . We strongly recommend you to go ahead and download trial version of Kendo UI from here. If you find any difficulties , throw your questions in comment or can directly send mail to us.

 

In this webinar we covered

  • Introduction to Kendo UI
  • Getting started with Kendo UI Web
  • Understanding and using different Kendo UI Web widgets
  • Getting started with Kendo UI Data VIZ
  • Kendo UI widgets on SharePoint web parts
  • Introduction to Kendo UI Mobile
  • Creating Hybrid Mobile application “Movie Explorer”

You can find some resources here to start exploring Kendo UI and can read Kendo UI documents here

If you need any assistance to start with Kendo UI please writes to us. See you soon in next webinar.

Netflix Movie Explorer : A Hybrid Mobile App using Kendo UI Mobile

This post is “Step by Step Illustration of Codes “required to create Netflix Movie Application. You can read a detailed article on same topic here .

image image

image

Step 1 : Add Reference


<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" />

Step 2 : Create Layout


<div data-role="layout" data-id="mobile-tabstrip">
 <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="#loginView" data-icon="action">Login</a>
 <a href="#movieTitleView" data-icon="more">Browse</a>
 <a href="#searchView" data-icon="search">Search</a>
 </div>
 </div>
 </div>

Step 3 : Initialize Kendo Mobile


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

Step 4 : Create Views

 <div data-role="view" id="movieTitleView" data-title="Title" >
 <h1>Movie Title View </h1>
 </div>
 <div data-role="view" id="loginView" data-title="Login" >
 <h1>Login View </h1>
 </div>
 <div data-role="view" id="searchView">
 <h1>Search View</h1>
 </div>

Step 5 : Create Data Source


var movieTitleData;
 movieTitleData = new kendo.data.DataSource(
 {
 type: "odata",
 pageSize: 30,
 endlessScroll: true,
 batch: false,
 transport: {
 read: {
 url: "http://odata.netflix.com/Catalog/Titles",
 dataType: "jsonp",

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

});
 function showMovieTitle(e) {
 movieTitleData.fetch();
 }

Step 6 : Create Template to show Movies Title


<script id="movieTemplate" type="text/x-kendo-template">
 <a href="\#movieDetailView?Id=#:data.Id#"
 class="km-listview-link"
 data-role="listview-link">
 <h4>#=data.Name.substring(0,15)#</h4>
 <img src= #=data.BoxArt.MediumUrl# />
 </a>
 </script>

Step 7 : Create List View to display Movie Title

<div data-role="view" id="movieTitleView"
 data-title="Title"
 data-show="showMovieTitle" >
 <ul id="movieTitleList"
 data-source="movieTitleData"
 data-endlessScroll="true"
 data-template="movieTemplate"
 data-role="listview"
 data-style="inset">
 </ul>
</div>

Step 8 : Define CSS for Movie Title


<style scoped>
 #movieTitleView
 h4 {
 display: inline-block;
 font-size: 1.1em;
 margin: 1em 0 .5em 1em;
 }

 #movieTitleView
 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;
 }
 #movieDetailView
 img {
 float: none;
 width: 15em;
 height: 12em;
 margin: 0;
 -webkit-box-shadow: 0 1px 3px #333;
 box-shadow: 0 1px 3px #333;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 }

 </style>

Step 9 : Create Data Source for Movie detail view


var movieTitleData;
movieTitleData = new kendo.data.DataSource(
 {
 type: "odata",
 pageSize: 30,
 endlessScroll: true,
 batch:false,
 transport:{
 read: {
 url: "http://odata.netflix.com/Catalog/Titles",
 dataType: "jsonp",

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

});

Step 10 : Create Template for Movie detail view


<script id="movieDetailTemplate" type="text/x-kendo-template">
 <h2>#=data.Name#</h2>
 <img src= #=data.BoxArt.LargeUrl# height=1 width=1/></br></br>
 <h4> #=data.Synopsis# </h4>
 <a data-role="button" data-rel="actionsheet" href="\#shareonSocialMediaActionSheet">Share Feedback</a>
 </script>

Step 11 : Create View for Movie detail view


<div data-role="view"

id="movieDetailView"

data-title="Details"

data-show="showMovieDetail" >

<ul data-role="actionsheet" id="Ul1" >

<li><a data-action="functionToShareOnFacebook">Facebook</a></li>

<li><a data-action="functionToShareOnTwitter">Twitter</a></li>

</ul>

</div>

Consuming JSON based WCF REST Service in Kendo UI Mobile

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.

image

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.

image

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.

image

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.

image

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

clip_image001

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.

clip_image002

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.

clip_image003

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

clip_image001[6]

Blogger View

clip_image002

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.

Back button styling problem in Kendo UI Mobile

I was creating a sample cross platform mobile application using with KendoUI mobile. I had a back button in the header and it was not rendering as expected .It was rendering like below,

clip_image001

On walking through code I found, I have added css reference twice.

clip_image003

I went ahead and removed duplicate reference. After that I found Back button was rendering as expected.

clip_image004

I hope this small observation will help you in creating your cool applications using Kendo UI Mobile.