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
Not finding the help you need? Improve this article