The mobile ListView widget can be bound to a JavaScript array and the mobile framework allows you to specify the DataSource for the ListView widgets:

<div data-role="view"
  data-init="flatlistviewinit">

  <ul id="flatlistview"></ul>

</div>

The previous markup does not contain any list items. It specifies the container's ul element, which will contain the list of items from the DataSource. Note that the view contains the data-init attribute. This attribute specifies the JavaScript callback function to invoke when the framework is initializing the widgets in the document.

The function flatlistviewinit is used to bind the DataSource to the unordered list in the markup.

var flatData = ["Australia", "Barbados", "Canada", "Denmark", "Egypt", "Finland", "Germany", "Hungary", "India", "Japan"];

function flatlistviewinit(){

  $('#flatlistview').kendoMobileListView({
    dataSource: flatData
  });

}

The previous code snippet defines an array containing a list of country names. The function flatlistviewinit is invoked by the framework when it tries to initialize the view in the document. This function binds the array to the ul element defined in the markup. The function kendoMobileListView is called on the specified selector to initialize it as a ListView widget. The function also specifies the datasource value to be used for the ListView widget. In this case, the DataSource widget is the array containing the list of country names.

When you execute this page, you will see that a list view is created, which displays a list of countries that we specified in the array.

In the previous example, we listed countries; in this section, we will group these countries based on the continent in which they belong.

To group each of these countries, let's create an array of JavaScript objects. Each object in the array will contain the country name and the continent to which it belongs.

var groupedData = [
   {name: "Ghana", continent: "Africa"},
  {name: "India", continent: "Asia"},
  {name: "Australia", continent: "Oceania"},
  {name: "France", continent: "Europe"},
  {name: "Mexico", continent: "N. AMERICA"},
  {name: "Sri Lanka", continent: "Asia"},
  {name: "Argentina", continent: "S. AMERICA"},
  {name: "Kenya", continent: "Africa"},
  {name: "Italy", continent: "Europe"},
  {name: "United States", continent: "N. AMERICA"},
  {name: "New Zealand", continent: "Oceania"},
  {name: "Brazil", continent: "S. AMERICA"},
];

Now let's create a function that will initialize the ListView widget with the previous array.

function groupedlistviewinit() {
  $('#groupedlistview').kendoMobileListView({
    dataSource: kendo.data.DataSource.create({
      data: groupedData, group: "continent"
    }),
    template: '${name}',
    fixedHeaders: true
  });
}

Here we are initializing an unordered list with an array of objects. While initializing the widget, we are specifying the datasource value to be used and also the property by which the list items should be grouped. The template property specifies the template to use when adding list elements to the ListView widget. The value of the template property in this case is ${name}. When the application is run, it will replace ${name} with the name property specified in the object. The fixedHeaders property contains a Boolean true as its value; this makes the headers fix to the top when you scroll the list.

When you run this page, you will see a list of items shown on the page and these are grouped by the continent names.

When you scroll, you will see that the headers containing the continent name fix to the top, as shown in the following screenshot:

The header will change only when a new group containing a list of country names is shown at the top of the list.