Three Steps of Working With JavaScript Array and Kendo UI Mobile ListView

In this article we will learn how to work with a JavaScript array and KendoUI Mobile ListView in three simple steps.

Step 1: Create Data Source

The very first thing you need to do is to create a data source. The application can read data from various sources. Some of the sources can be any of the following:

1. Reading data from remote data source
2. Reading data from local memory
3. Reading static data from local array
   

Let us create a data source by reading data from a local array, as in:

  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

A 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 how you want to display or render data. In Kendo UI Mobile you can create a template as in

following:

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

To create a Kendo Template, you need to create a script with type "text/x-kendo-template". Values from the data source will be rendered by using a property name as in the following:

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

To make data rendering more immersive you need to set the style of data in CSS. You will notice in the above template that we are setting the class attribute of the img and span tags. These classes are defined in CSS as in the 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

In Step 2 you created the data source and template. Next you need to create a ListView. Creating a ListView is very simple and can be created as in the 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 a ListView you need to set the "data-role" attribute of the "<ul>" element to "ListView". To define how data should be displayed in the ListView set the "data-template" attribute. The data source can defined by setting the "data-source" attribute. 

Note: we have placed the speaker's photos locally in the spakerimages folder. Since we are setting the speaker photo attribute in the Speaker JavaScript array.

Running the Application

On running of the application you should get a ListView with the speaker's details as in the following:

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