New to Kendo UI for jQuery? Download free 30-day trial

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>
      var app = new;

      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() {
          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

See Also

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

In this article