How to display data in group format in Kendo UI mobile

Question

How to group data with fixed header template in list view? Here is my sample code:

jsfiddle

FYI, I don't have server grouping. I want to display data by sample_number and date_collected. Can anyone help with this.

JSON Data: d{analytical_value:1002.0, data_collected:01/14/14, parameter:Density @15C, sample_number:"1"}

Answer 1

here is my updated code sample.

I've passed the I've passed the array d from the returned data to the template.

Note, in my sample, I'm use the hardcoded data you sent and not data from the service.

<div data-role="view" id="foo" data-init="mobileListViewHeadersInit">
   <ul id="list"></ul>
</div>

<script id="tmp" type="text/x-kendo-template">        
    #: __type # <br />
    #: date_collected #<br />
    #: parameter #<br />
    #: analytical_value #
</script>  

<script>       

  var app = new kendo.mobile.Application(document.body);
  var ds = {"d":[{"__type":"Service1.Sample:#MobileWCFService","analytical_value":"1002.0 ","date_collected":"01\/14\/14","letter":"1","parameter":"Density @ 15°C "},{"__type":"Service1.Sample:#MobileWCFService","analytical_value":"464.0 ","date_collected":"01\/14\/14","letter":"1","parameter":"Viscosity @ 50 °C "}]};


  function mobileListViewHeadersInit(){
    $("#list").kendoMobileListView({
      dataSource: kendo.data.DataSource.create({data: ds.d}),
        template: $("#tmp").html()          
    });
  }

</script>