Edit this page

fixedHeaders Boolean(default: false)

If set to true, the group headers will persist their position when the user scrolls through the listview. Applicable only when the type is set to group, or when binding to grouped DataSource.

Notice: fixed headers are not supported in virtual mode.


<div data-role="view">
  <ul data-role="listview" data-source="groupedData" data-fixed-headers="true" data-template="my-template" data-header-template="header-template"></ul>

<script type="text/x-kendo-template" id="my-template">
  <h3 class="item-title">#: name #</h3>
  <p class="item-info">#: description #</p>

<script type="text/x-kendo-template" id="header-template">
    #: value #

var groupedData = new kendo.data.DataSource({
    data: [
      { name: "Sashimi Salad", description: "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.",  letter: "S" },
      { name: "Seaweed Salad", description: "A nice seaweed salad.",  letter: "S" },
      { name: "Edamame", description: "Boiled soy beans with salt.",  letter: "E" },
      { name: "Maguro", description: "Tuna pieces.",  letter: "M" },
      { name: "Tekka Maki", description: "Tuna roll with wasabi.",  letter: "T" },
      { name: "California Rolls", description: "Crab sticks, avocado and cucumber.",  letter: "C" }
    group: { field: "letter" }

new kendo.mobile.Application();
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article