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

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

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

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.