Group Data

The example below demonstrates how to group data by the first letter of each item in a hybrid Kendo UI ListView.

    <div id="home" data-role="view" data-init="onInit">
      <ul id="listview"></ul>
    </div>
    <script>
      var app = new kendo.mobile.Application();

      var groupedData = [
        {name: "Sashimi salad"},
        {name: "Chirashi sushi"},
        {name: "Seaweed salad"},
        {name: "Edamame"},
        {name: "Miso soup"},
        {name: "Maguro"},
        {name: "Shake"},
        {name: "Shiromi"},
        {name: "Tekka maki"},
        {name: "Hosomaki Mix"},
        {name: "California rolls"},
        {name: "Seattle rolls"},
        {name: "Spicy Tuna rolls"},
        {name: "Ebi rolls"},
        {name: "Chicken Teriyaki"},
        {name: "Salmon Teriyaki"},
        {name: "Gohan"},
        {name: "Tori Katsu"},
        {name: "Yaki Udon"}
      ];

      function onInit() {
        $("#listview").kendoMobileListView({
          dataSource: {
            data: groupedData,
            schema: {
              parse: function (data) {
                for(var i = 0; i < data.length; i++) {
                  data[i].letter = data[i].name.charAt(0);
                }
                return data;
              }
            },
            group: { field: "letter" }
          },
          template: "${name}",
          fixedHeaders: true
        });
      }
    </script>

See Also

• Hybrid UI ListView JavaScript API Reference
• Overview of the Hybrid UI ListView
• Endless Scrolling Feature
• Pull-to-Refresh Feature

For more runnable examples on the Kendo UI hybrid ListView, browse its How To documentation folder.